The z-index Property in CSS

The z-index property in CSS controls the stacking order of elements that overlap each other. It is only effective on elements that have a position property set to relative, absolute, fixed, or sticky. The z-index determines which elements appear on top of others by assigning them a numerical value: elements with higher z-index values appear in front of those with lower values.

How z-index Works

• Stacking Context:

  • The z-index property establishes a stacking context, which is a three-dimensional conceptual layer that determines the order in which elements are rendered. Elements within a stacking context are stacked according to their z-index values.
  • The stacking order inside a stacking context is independent of other stacking contexts, which means z-index values only make sense within their own context.

• Default Value:

  • The default value of z-index is auto, which means the element will be stacked according to the document order, with no specific stacking order applied.

Usage

div {
  position: absolute;
  z-index: 10;
}

In this example, the div element will be positioned according to its top, right, bottom, or left values (since it’s position: absolute;), and it will be stacked on top of other elements with a lower z-index.

Values

• auto:

  • The element inherits its stack order from its parent and is positioned according to the default stacking order.

  .box {
    position: relative;
    z-index: auto;
  }
  

• Integer Values (Positive or Negative):

  • Positive integers stack the element higher, meaning it appears in front of elements with a lower z-index.
  • Negative integers stack the element lower, meaning it appears behind elements with a higher z-index.

  .box1 {
    position: absolute;
    z-index: 2;
  }
  
  .box2 {
    position: absolute;
    z-index: 1; /* Stacks below .box1 */
  }
  
  .box3 {
    position: absolute;
    z-index: -1; /* Stacks below .box2 */
  }
  

Stacking Order Without z-index

Even without a specified z-index, elements have a natural stacking order based on:

1. Background and Borders: The background and borders of an element are behind the element's content.
2. Block-level Elements: These stack in the order they appear in the HTML.
3. Positioned Elements: Elements with a position value of relative, absolute, fixed, or sticky are stacked on top of static elements.

Creating Stacking Contexts

Certain properties automatically create new stacking contexts, regardless of z-index:

• Any element with position set to relative, absolute, fixed, or sticky and a z-index other than auto.
• Elements with opacity less than 1.
• Elements with transform, filter, perspective, or clip-path applied.
• Elements with mix-blend-mode set to a value other than normal.

Each of these elements and properties creates a new stacking context, isolating the element's children from the stacking context of its ancestors.

Example

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* This box will be on top */
}

.box2 {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* This box will be in the middle */
}

.box3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 100px;
  height: 100px;
  background-color: green;
  z-index: -1; /* This box will be at the bottom */
}

Explanation

• Box 1 (Red): With z-index: 2;, this box will be on top of the other two boxes.
• Box 2 (Blue): With z-index: 1;, this box will be in the middle layer, above Box 3 but below Box 1.
• Box 3 (Green): With z-index: -1;, this box will be underneath both Box 1 and Box 2.

Important Notes

• Sibling Elements: z-index only affects sibling elements (elements with the same parent).
• Isolated Contexts: Each new stacking context is independent. This means that elements within one stacking context do not affect the stacking order of elements in another stacking context.