CSS Z-Index: Conquering the Z-Axis
The most common CSS joke: `z-index: 9999999; !important`. But z-index is not magic; it operates on strict mathematical rules defined by DOM order, positioning, and stacking contexts.
The Natural Stacking Order
Before we even touch z-index, the browser has a built-in way of deciding what goes on top. If two elements overlap, the browser looks at the HTML document. The element that appears later in the HTML will be drawn on top of the elements that appear before it.
Furthermore, within a single container, elements are painted in this specific order (from back to front):
- Background and borders of the root element
- Descendant non-positioned blocks (like standard
divs) - Descendant positioned elements (like
position: absolute)
Activating Z-Index
The property z-index allows us to override the natural stacking order. However, it comes with a strict prerequisite: it only applies to positioned elements.
If you add z-index: 100 to a normal static div, nothing happens. You must add position: relative, absolute, fixed, or sticky for the browser to acknowledge the z-index value.
The Final Boss: Stacking Contexts
This is where developers cry. A Stacking Context is a three-dimensional conceptualization of HTML elements. When an element forms a stacking context, everything inside it is evaluated together against the rest of the document.
Imagine two folders on a desk. Even if a paper inside Folder A is marked "priority 1,000,000", if Folder B is placed on top of Folder A, you won't see the paper. The paper is trapped inside Folder A.
What triggers a new stacking context?
- A positioned element with a
z-indexvalue other thanauto. - An element with
opacityless than 1. - Elements with
transform,filter, orperspectiveapplied. - The modern solution:
isolation: isolate.
View Modern Workarounds+
Use isolation: isolate! Instead of adding position: relative; z-index: 1; just to create a stacking context (which might break other layouts), use isolation: isolate. It does exactly one thing: creates a new stacking context safely.
❓ Frequently Asked Questions
Why is my z-index not working?
1. The element isn't positioned. Add position: relative;.
2. It's trapped inside a parent element that has formed a stacking context with a lower z-index than the element you are trying to overlap.
Can I use negative z-index?
Yes! z-index: -1 is often used to push decorative pseudo-elements (like ::before) behind their parent's background. Just ensure the parent forms a stacking context so the pseudo-element doesn't disappear behind the body.
Should I use z-index: 9999?
Ideally, no. This is called "z-index warfare." It's better to structure your HTML logically, rely on DOM order, and use small integer steps (1, 2, 3) or dedicated variables (e.g., --z-modal: 100) to manage layers systemically.