Overlap HTML Elements Using Z-Index

Overlapping HTML elements such as images and colored box is quite easy. One of the technique used in this tutorial is through z-index.

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.

Look at this CSS example below: View the live example.

See the screenshot