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

div.box1 {
top: 20px; left: 20px;
height: 250px; width: 250px;
color: white;
background-color: #333333;
z-index: 1;}

div.box2 {
top: 150px; left: 10px;
height: 100px; width: 300px;
background-color: #CC3333;
z-index: 20;}

div.box3 {
top: 15px; left: 175px;
height: 125px; width: 125px;
background-color: #CCFF33;
z-index: 10;}

CSS example above will brought images that are not working and not overlapping at each other as we want.

However, by simply adding position:absolute; , will get your desired effects.

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

See the screenshot

div.box1 {
position: absolute;
top: 20px; left: 20px;
height: 250px; width: 250px;
color: white;
background-color: #333333;
z-index: 1;}

div.box2 {
position: absolute;
top: 150px; left: 10px;
height: 100px; width: 300px;
background-color: #CC3333;
z-index: 20;}

div.box3 {
position: absolute;
top: 15px; left: 175px;
height: 125px; width: 125px;
background-color: #CCFF33;
z-index: 10;}

The position:absolute; added CSS above will bring effects to this. View the live example.

Using the same technique may get similar effect if you’re using images, but it will be more attractive, nice and skillful. See it live here!

• 9 Magazine Style Themes
• 22 Simple & Clean Themes
• Listing Style with Image as Bullets