Which CSS Properties Does z-index Work With?

The CSS z-index property only applies to the following elements:

1. Positioned Elements;
2. Flex Items;
3. Grid Items.

Positioned Elements

The z-index property applies to any element that has a position value other than static. This means that it only works with the following position values:

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky.

Flex Items

Flex items are flexbox elements that are direct children of a flex container (i.e. an element with display: flex or display: inline-flex).

The z-index property can be directly applied to flex items to control their stacking order in a flex container when they overlap, for example, due to negative margins or positioning.

For instance, consider the following HTML/CSS which demonstrates how the z-index property directly applies to flex items when they overlap because of negative margins:

<div id="parent">
  <div id="child-1"><code>z-index: 2;</code></div>
  <div id="child-2"><code>z-index: 1;</code></div>
</div>

#parent {
  display: flex;
  width: 150px;
  height: 150px;
  padding: 1em;
  border: 1px solid red;
}

#child-1 {
  height: 50px;
  z-index: 2;
  background: aliceblue;
  border: 2px solid lightblue;
}

#child-2 {
  height: 50px;
  margin-top: -15px;
  z-index: 1;
  background: pink;
  border: 2px solid hotpink;
}

By applying negative margin-top on the second element, you can see how the flex item with the higher z-index appears in front of flex item with a lower z-index, producing an output like the following:

As you can see in the example above, the first flex item appears in front of the second flex item as it has a higher z-index value.

Grid Items

Grid items are grid layout elements that are direct children of a grid container (i.e. an element with display: grid or display: inline-grid).

The z-index property can be directly applied to grid items to control their stacking order in a grid container when they overlap, for example, due to negative margins or positioning.

For instance, consider the following HTML/CSS which demonstrates how the z-index property directly applies to grid items when they overlap because of negative margins:

<div id="parent">
  <div id="child-1"><code>z-index: 2;</code></div>
  <div id="child-2"><code>z-index: 1;</code></div>
</div>

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 150px;
  height: 150px;
  padding: 1em;
  border: 1px solid red;
}

#child-1 {
  grid-column: 1;
  z-index: 2;
  background: aliceblue;
  border: 2px solid lightblue;
}

#child-2 {
  grid-column: 1 / span 2;
  margin-top: -15px;
  z-index: 1;
  background: pink;
  border: 2px solid hotpink;
}

By applying negative margin-top on the second element, you can see how the grid item with the higher z-index appears in front of grid item with a lower z-index, producing an output like the following:

As you can see in the example above, the first grid item appears in front of the second grid item as it has a higher z-index value.