z-index: why 9999 is sometimes not enough

Useful to know

z-index defines the overlay order for the applicable elements and is involved in creating stacking contexts. The larger number does not guarantee that the item will go above everything in the document: its parent context also has a place in the arrangement. [1]

Imagine two separate groups of cards. A menu with z-index: 9999; inside the lower group can remain below the upper group as a whole. Increasing to an even larger number does not change this dependence. The example shows the logic of nested layers without exhausting all the ways to create a context.

When a drop-down menu disappears under an adjacent block, check the parent contexts and the eventual cropping with overflow. z-index arranges the layers; it does not override any container constraint. Keep a small, clear system of values for menus, panels, and other overlays.