Z-Index : Overlap HTML elements with CSS

Via this guide, you will learn what a Z-Index is and how to use this property to overlap HTML elements with CSS.

What is a Z-Index

Z-index is an property in CSS and has been included in CSS because people asked for an property with the possibility to make HTML elements overlap. Overlapping HTML elements can have a lot of advantages. You can make the important parts of your website fall out from the background some more.

How to use Z-Index?

Z-index uses values to identify which element is more important then the other. The default value is 0. Usually, I give the item that should be on top value 20, the less important 10 and the least important item 1.

It doesn’t really matter which numbers you give to the Z-index. The only thing you should remember is that your top item should have to highest value. But adding Z-index to items isn’t enough to make things work.

For our example, we will use the following HTML structure. Those boxes should get ‘Z-indexed’ later on!

<div class="box1">Blue = Div #1 </div>
<div class="box2">Pink = Div #2 </div>
<div class="box3">Yellow = Div #3 </div>

Click here to take a look at an example I made. The item that should be on top (because of the Z-index value) is not on top: the boxes are displayed under each other instead of on top of each other. It looks like the Z-index is not working in this example, right?

The codes I have used in this example. It should work was my first guess as well.
div.box1 {
height: 250px;
width: 250px;
background-color: blue;
z-index: 1;
}
div.box2 {
height: 100px;
width: 300px;
background-color: pink;
z-index: 20;
}
div.box3 {
height: 125px;
width: 125px;
background-color: yellow;
z-index: 10;
}

What’s up?

The Z-index requires an other property to style the elements that should get ‘Z-indexed’. Our element requires the position property is set to absolute to make things works. Otherwise our Z-index won’t work, as can be seen in the example above.

It’s now time for an example that works. The boxes has been styled with the right properties and is ready to be used. A working Z-index example can be found here.

These are the codes I used here. I simply added an position:absolute; and a couple placement values (top, left) to the boxes. It works!

div.box1 {
    position: absolute;
     top: 20px; left: 20px;
     height: 250px; width: 250px;
     color: white;
     background-color: blue;
     z-index: 1;
}
div.box2 {
    position: absolute;
     top: 150px; left: 10px;
     height: 100px; width: 300px;
     background-color: pink;
     z-index: 20;
}
div.box3 {
    position: absolute;
     top: 15px; left: 175px;
     height: 125px; width: 125px;
     background-color: yellow;
     z-index: 10;
}

We are done

I hope you now have fully understood the Z-index principle. You should always remember to add a position:absolute; property, or your Z-index will not work! If you have any questions regarding this subject, contact me or leave a comment.