Understanding z-index: it's about stacking contexts
The CSS property
z-index is not as global as you might think. Actually, it is scoped to a so-called "stacking context". z-indexes only have meaning within their stacking context, while stacking contexts are treated as a single unit in their parent stacking context. This means indices like
99999 should never actually be needed.
In order to create a stacking context with the least possible side effects, use theproperty on an element:
Note that many more properties create a new stacking context, like
transform. See .
A negative z-index pushes an element down the stack. To profit from this, make sure a parent element creates a new stacking context. Then, within this context, you can move elements to the back (e.g. background images, gradients etc). They will be rendered behind all other elements within the context (e.g. text), but not behind elements outside the stacking context (like the page background).
Study this example graphic for a quick understanding of how stacking contexts work:
- , with many examples
Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.