CSS z-index
The z-index property controls which elements appear in front of or behind others on the screen. Layering is key in building complex interfaces.
The basics of z-index
Z-index values determine the stacking order of elements. It only works on elements whose position is not static.
| Value | Description |
|---|---|
| auto | The element inherits the stacking order of its parent element. |
| 0, 1, 10, ... | With positive values, the element moves forward in stacking order. |
| -1, -10, ... | With negative values, the element moves backward in stacking order. |
Example of using z-index
In this example, two boxes overlap. Z-index determines which is visible on top.
The blue box received z-index: 1, while the red box with z-index: 2 appears on top.
Stacking context
The stacking context defines how elements are layered over each other. A new stacking context is created, for example, if an element has a position and z-index, or uses certain CSS properties (like opacity < 1).
In the following example, the parent element creates a stacking context, so its children's z-index values are only valid within it.
Practical usage
Z-index often appears with popups, menus, modals, or tooltips. If a menu appears behind another element, z-index can bring it forward.
Tips for using z-index
Proper use of z-index helps avoid unexpected overlaps and ensures visual hierarchy.
- Always check that the element has a position property (e.g., relative, absolute, fixed).
- Avoid using excessively high or random values, as the layout can become messy.
- Use a logical layering system for consistent layouts.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
