Super fun thing I learned via following the rabbit from Piccalilli's newsletter, The Index #86 to Web Dev's z-index page to Mozilla's stacking context page.
Elements within a stacking context are stacked independently from elements outside of that stacking context, ensuring elements in one stacking context don't interfere with the stacking order of elements in another. Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
Within a stacking context, child elements are stacked according to the z-index values of all the siblings. The stacking contexts of these nested elements only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context. Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context