Previous

CSS: Z-Index

The z-index property in CSS controls the stacking order of elements that overlap. It determines which elements are in front of or behind others. The z-index property only works on elements that have a position value other than static (i.e., elements with position: relative;, absolute;, fixed;, or sticky;).

Syntax

selector {
  z-index: value;
}

Values

  • auto: The default value. The element does not create a new stacking context. It behaves as if it has no z-index.
  • number: An integer value (positive, negative, or zero) that sets the stacking level of the element. Higher numbers are in front of lower numbers. Negative values are allowed.

Stacking Context

A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user facing the screen. Elements with a higher z-index are in front of elements with a lower z-index. A new stacking context is formed in the following situations:

  • When the z-index property is set to a value other than auto on an element with a position value other than static.
  • Opacity less than 1 (e.g., opacity: 0.5).
  • Certain CSS properties like transform, filter, perspective, clip-path, etc.

Examples

Basic Usage

In this example, .box2 will appear on top of .box1 because it has a higher z-index.

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<style>
  .box1 {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 1;
  }
  .box2 {
    position: absolute;
    left: 70px;
    top: 70px;
    width: 100px;
    height: 100px;
    background-color: blue;
    z-index: 2;
  }
</style>

Negative z-index

In this example, .box1 will appear behind .box2 because it has a negative z-index.

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<style>
  .box1 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: -1;
  }
  .box2 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

Stacking Context Example

In this example, even though child2 has a lower z-index than child1, both are contained within the same parent, which has its own stacking context. Thus, within the parent, child1 will appear in front of child2.

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>
<style>
  .parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: yellow;
    z-index: 1; /* Creates a new stacking context */
  }
  .child1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 2;
  }
  .child2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    top: 50px;
    left: 50px;
    z-index: 1;
  }
</style>

Important Considerations

  • Layering Contexts: When multiple stacking contexts overlap, the z-index values within each stacking context are respected, but the contexts themselves follow the stacking order of their parent elements.
  • Default Behavior: Elements with position: static; do not respect z-index, and their stacking order is based purely on their order in the HTML (later elements stack on top of earlier ones).
  • Nested Stacking Contexts: An element with a higher z-index in a child stacking context will still appear behind an element with a lower z-index in a parent stacking context if the parent itself has a higher z-index.

Understanding and using z-index effectively can be crucial for creating complex layouts where elements need to overlap in a controlled manner.

Previous