The z-index is a stacking order property for an element. What does this mean exactly?. Well, think of it as something similar to using layers in Photoshop. The stacking order controls what element is positioned first, last or in between.

With z-index, you could define the order of images, or place text over or an image or even hide it behind an image if the situation requires it. The element with the higher stack order will always be in front of the element with a lower stack order. This is controlled with the property values of:

  • auto – equal stack order to its parents
  • number – negative numbers are also allowed
  • initial – sets the property to default
  • inherit – sets the property to parent

The z-index will only become active on positioned elements such as relative, absolute and fixed. For the example, below we are only using numbers to control z-index with relative and absolute positioning.

To demonstrate z-index this example shows:

  • A clear background box with a grey text and a grey line border
  • A pseudo-element to place a black background before (behind) the text, but still showing some of the clear background.
  • Five colored boxes of different z-index levels including negative numbers to move behind elements.
  • Box 5 is a nested child of box 4
<!-- HTML -->

<html>  
  <div id="backgroundBox">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet., no sea takimata sanctus est Lorem ipsum dolor sit amet., no sea takimata sanctus est Lorem ipsum dolor sit, no sea takimata sanctus 
  </div>
  <div id="box1">Red Box 1</div>
  
  <div id="box2">Blue Box 2</div>
  
  <div id="box3">Green Box 3</div>

  <div id="box4"> <!-- parent/child scenario with box 4 and 5 -->
    Yellow Box 4 <!-- yellow box 4 text is a sibling of orange box 5 div -->
    <div id="box5">Orange Box 5</div> <!-- child of box 4 div -->
  </div> 
</html>   
/* CSS */

* {
  padding: 0;
  margin: 0;
}

#backgroundBox {
  width: 400px;
  height: 400px;
  color: grey;
  position: relative;
  border: 1px solid grey;
  margin: 2px
}

#backgroundBox:before {
  position: absolute;
  display: block;
  width: 95%;
  height: 95%;
  top: 0;
  left: 0;
  content: "";
  background: black;
  z-index: -2;
}

#box1 {
  height: 100px;
  width: 100px;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  line-height: 100px; 
  display: inline-block;
  position: absolute;
  top:7px;
  left: 10px;
  z-index: -1;
}

#box2 {
  height: 100px;
  width: 100px;
  background-color: blue;
  text-align: center;
  vertical-align: middle;
  line-height: 100px; 
  display: inline-block;
  position: absolute;
  top: 80px;
  left: 50px;
  z-index: 1;
}

#box3 {
  height: 100px;
  width: 100px;
  background-color: green;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;  
  display: inline-block;
  position: absolute;
  top: 160px;
  left: 100px;
  z-index: 2; 
}

#box4 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;  
  display: inline-block;
  position: absolute;
  top:240px;
  left:150px;
  z-index: 3;
}

#box5 {
  height: 100px;
  width: 100px;
  background-color: orange;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;  
  display: inline-block;
  position: absolute;
  top: 30px;
  left:53px;
  z-index: -1; 
}

As you can see from the code, the parent box is the clear background box. This is given no z-index but is given a position of relative. This, however, defaults to a z-index of 0. All elements within here will be given z-index and absolute positioning. On the face of it, this seems fairly straight forward, which it is mostly.

  • The black pseudo-element has been set at a z-index of -2 so that it sits behind the text and the red box.
  • The red box is set to -1 so that it sits behind the text but in front of the black background.
  • Boxes two, three and four go up the stacking order with z-indexes of 1, 2 and 3

There is a caveat worth mentioning with z-index and that is to do with the stacking context. This is where a new stacking order can be created outside of the original stacking order. This can get a little confusing and will definitely become clearer with experience, however, the orange box 5 shows a very basic example of this.

While box 4 is still in the original stacking order, box 5 is a nested child of box 4. Box 5 can never go behind its parent, but the parent’s text of ‘yellow box 4’ is in fact classed as a sibling to box 5 and this allows box 5 to sit under the parent’s text with a z-index of -1, but never behind the yellow box itself.

Conclusion

As you can see, z-index is a very useful feature of CSS. It allows you to be more versatile with your code and you will find yourself using it a lot as your CSS becomes more advanced. Beware of how it can get confusing with the stacking context, but this will definitely become more clear with experience.

I hope you enjoyed this simple example of z-index. Please feel free to leave any comments below.