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.