A stacking context is an independent layering scope within a page. Elements inside a stacking context are sorted by z-index relative to each other, not relative to the rest of the page. When a parent element creates a stacking context, its children are locked inside it: no matter how high their z-index values are, they can't layer above elements outside the context if the context itself sits below them.
A stacking context is created automatically by several CSS properties. The most common triggers: an element with position: fixed or position: sticky, an element with position: absolute or position: relative combined with a z-index value, and elements using transform, opacity (with a value less than 1), or filter.
This is why setting z-index: 9999 on an element sometimes has no effect: the element is inside a stacking context that sits behind another context, and the z-index is being evaluated within the wrong scope. Loupely Lens detects the stacking contexts involved in a layering conflict and identifies which parent element created the context that's trapping your element.
