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, z-index: 1 z-index: 2 z-index: 3 z-index: 2 z-index: 1 Try to change the z-index of this box 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

Apr 23, 2025 - 15:39

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,

 class="item1">z-index: 1


 class="item2">z-index: 2


 class="item3">z-index: 3


 class="item4">z-index: 2


 class="item5">z-index: 1



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

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