Stacking Elements with Z-index in CSS

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

z-index is used to control the order of elements when they are stacked on top of each other. The property accepts integer values, the higher the integer, the higher the order. For example,

<div class="item1">z-index: 1</div>
<div class="item2">z-index: 2</div>
<div class="item3">z-index: 3</div>
<div class="item4">z-index: 2</div>
<div class="item5">z-index: 1</div>

<div class="item">Try to change the z-index of this box</div>

div {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  text-align: center;
  padding: 20px;
  border: 1px solid orange;
  background-color: bisque;

  position: absolute;
}

.item {
  top: 0px;
  left: 0px;
  height: 300px;

  border: 1px solid skyblue;
  background-color: lightblue;
}

.item1 {
  top: 0px;
  left: 0px;

  z-index: 1;
}

.item2 {
  top: 50px;
  left: 50px;

  z-index: 2;
}

.item3 {
  top: 100px;
  left: 100px;

  z-index: 3;
}

.item4 {
  top: 150px;
  left: 50px;

  z-index: 2;
}

.item5 {
  top: 200px;
  left: 0px;

  z-index: 1;
}

Visit Code Demo 🔗

By default, the box .item4 should be on top of .item3, but we configured their z-index values, and because .item3 has a higher order, it will be on top of all other elements.

You can also change the z-index of the blue box (.item) to see what happens.

DEV Community

Stacking Elements with Z-index in CSS

Top comments (0)