Why can z-index: 999999 lose?

Two panels overlap. Panel A lives inside a wrapper and carries an absurd z-index. Panel B is a plain sibling of that wrapper. Toggle properties on the wrapper and watch which panel survives.

Every property in that list produces the same outcome: the wrapper becomes a stacking context, and Panel A's 999999 stops being comparable to Panel B's 2. The number did not shrink, it changed jurisdiction.

Painting is a tree walk, not a global sort. The browser paints the root stacking context, and whenever it meets an element that establishes a new stacking context it paints that element's entire subtree as a single unit before moving on. Descendant z-index values are resolved *inside* that unit and can never escape it.

1.wrapper {2 position: relative;3 opacity: 0.99; /* ← establishes a stacking context */4}56.panel-a {7 position: absolute;8 z-index: 999999; /* sorted only against siblings in .wrapper */9}1011.panel-b {12 position: absolute;13 z-index: 2; /* sorted against .wrapper itself, which has z-index: auto */14}

Because .wrapper computes to z-index: auto, it is painted in the positioned-elements step at effectively level 0. .panel-b sits at level 2 in the *same* parent context, so it paints later, on top, and takes the entire wrapper subtree, 999999 included, with it.

The practical consequence: a modal, dropdown or tooltip can never escape an ancestor stacking context by raising its z-index. The fixes are structural, move the element out of the subtree (a portal), stop the ancestor from creating a context, or raise the ancestor itself.