See the Code - See it Full Page - See Details
When dealing with `z-index` and `absolute`/`fixed` positioning you often confront containing blocks and stacking contexts quickly. An element that uses absolute positioning is in relation to the nearest parent that is considered the containing block. this is typically an element that also has an absolute position or a `relative` position. This is not the only way to set the containing block, and sometimes it is unexpected. An element with a CSS Transform also does this. So if you have an element with absolute positioning with a transformed parent, the absolute position will be in the context of the transformed parent (even if it has static positioning). The same is true for a parent element that has a `will-change: transform` ... even if it is not currently transformed and even if it has static positioning.
This Pen uses: HTML, CSS, JavaScript, and