The CSS z-index Property

Overview

The z-index property in CSS is used to control the stacking order of elements along the Z-axis (the depth axis) in a 3D space, allowing you to position elements above or below each other on a web page. This could be quite useful when working with overlapping elements, such as dropdown menus, modal dialogs, or tooltips.

The property only applies to positioned elements, i.e. set to relative, absolute, fixed, or sticky, excluding the default value of static.

Examples and Usage

Let's demonstrate how to layer three colored divs and showcase the basic behavior of the z-index property. We have three divs with different colors - cyan, magenta, and black - and we'll arrange them so that black appears on top, followed by cyan in the middle, and magenta at the bottom.

<div class="cyan-layer"></div>

<div class="magenta-layer"></div>

<div class="black-layer"></div>

/* The cyan layer has a z-index of 2 and will appear in the middle */
.cyan-layer {
  background-color: cyan;
  width: 280px;
  height: 120px;
  position: relative;
  top: 10px;
  left: 80px;
  z-index: 2;
}

/* The magenta layer has a z-index of 1 and will appear at the bottom */
.magenta-layer {
  background-color: magenta;
  width: 280px;
  height: 120px;
  position: relative;
  top: -60px;
  left: 35px;
  z-index: 1;
}

/* The black layer has a z-index of 3 and will appear on top */
.black-layer {
  background-color: black;
  width: 280px;
  height: 120px;
  position: relative;
  top: -260px;
  left: 120px;
  z-index: 3;
}

The z-index values assigned to each div determine their stacking order. Notice how the black layer has the highest z-index value (3), making it appear on top of the other layers. Similarly, the cyan layer has a z-index of (2), placing it in the middle, while the magenta layer has the lowest z-index value (1), positioning it at the bottom.

In this next case, we illustrate the use of a negative value to position a child element behind its parent. We have a parent div with a semi-transparent background, allowing you to notice the stacking order of the child element behind it. The z-index property is applied to control the stacking order and effectively position the child element behind its parent.

<div class="parent-element">
  <div class="child-element">This div is positioned behind the parent</div>
</div>

.parent-element {
  background: rgba(200, 230, 201, 0.5); /* Semi-transparent background */
  border: 1px solid mediumseagreen;
}

.parent-element .child-element {
  position: relative; /* Establishes a new stacking context */
  z-index: -1; /* Negative z-index value to position behind the parent */
  
  background: LightGoldenRodYellow;
  border: 1px solid darkred; 
  padding: 1rem;
  width: 280px; 
}

/* Styling */
.parent-element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 290px;
  height: 200px;
}

The z-index value of the child element is set to (-1). Note that the parent element has a default value of auto (or 0) and, as a result, the child element with a negative z-index appears behind its parent. Furthermore, we've applied the position: relative property to the child element, establishing a new stacking context.

Syntax and Values

The z-index property accepts the following values:

z-index: auto | <integer>

Value	Description
`auto`	The stacking order is determined by the natural order of elements.
`<integer>`	A positive or negative integer defining the stacking order.

Associated Properties

position

Tips and Tricks

z-index also works with flex items (direct children of display:flex elements) or grid items.
Remember that z-index values create a stacking context. Elements with a higher z-index will appear above elements with a lower z-index within the same stacking context. If two elements have the same values, their natural stacking order will determine their position.
Consider organizing your values in a systematic way (e.g., increments of 10 or 100) to make it easier to manage and update your CSS as needed.
Avoid unnecessarily large values or overusing !important. This can lead to difficulties in managing your code and potential conflicts with third-party plugins or add-ons.
Be mindful that z-index can impact the accessibility of your website, especially when dealing with overlapping elements. Test your site to ensure that all content remains accessible and readable.