CSS z-index Property

CSS z-index is used to control the stacking order of overlapping elements, which decides whether an element appears on top or behind others based on their assigned value.

• It works only on positioned elements (relative, absolute, or fixed).
• Default stacking order applies if no z-index is defined.
• The z-index property can take various values, which we’ll cover below.

Property values

These are the values of the z-index property and their descriptions:

1. Using z-index with auto

The auto value applies the default stacking order without explicitly defining the stacking context.

• The red box (.box1) and blue box (.box2) overlap.
• Since both boxes have their z-index set to auto, the default stacking order applies, and the blue box is rendered on top because it comes later in the DOM.

2. Using z-index with Numbers

Specifying numerical values controls the stacking order. Higher values stack above lower ones.

The blue box (z-index: 2) appears above the red box (z-index: 1).

3. Using z-index with initial

The initial value resets the z-index to its default value of auto.

The red box follows the default stacking order since z-index: initial resets to auto.

4. Using z-index with inherit

The inherit value ensures the element inherits its z-index value from its parent.

The child element inherits the z-index value (5) from its parent.

5. Combining z-index with Multiple Contexts

When working with multiple stacking contexts, the z-index applies only within its context.

The red box stacks above the blue box within the same stacking context defined by the parent element.