In CSS, you can create layers of various divisions. CSS z-index property can be combined with the position property to create a layer effect.
The z-index property specifies the stacking order of an element. You can specify which element should come on top and which at bottom.
A z-index property can help you to create more complex webpage layouts.
CSS Layers – With z-index Property
The following example demonstrates how to create layers using z-index property. The elements with higher z-index value are positioned above the elements of lower z-index value −
<html><head><style>
.box1 {
position: absolute;
height: 100px;
width: 100px;
background-color: red;
z-index: 1;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 100px;
width: 100px;
background-color: lightblue;
z-index: 2;
padding: 5px;
margin: 10px;
left: 50px;
top: 30px;
}
.box3 {
position: absolute;
height: 100px;
width: 100px;
background-color: yellow;
z-index: 3;
padding: 5px;
margin: 20px;
left: 80px;
top: 50px;
}
p {
margin-top: 200px;
}
</style></head><body><p>The element with z-index value of 1 appears behind the elements with the z-index value of 2 and 3.</p><div class="box1">
CSS z-index: 1
</div><div class="box2">
CSS z-index: 2
</div><div class="box3">
CSS z-index: 3
</div></body></html>CSS Layers – Images and Text
The following example demonstrates how to create layers using z-index property. Higher z-index elements are positioned above lower z-index elements −
<html><head><style>
img {
height: 200px;
width: 200px;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
margin: 5px;
}
h1 {
margin-top: 30px;
z-index: 1;
color: red;
}
</style></head><body><img src="images/shop.png"><h3>Tutorialspoint</h3></body></html>CSS Layers – Without z-index Property
The following example demonstrates how to create layers without using z-index property −
<html><head><style>
.box1 {
position: absolute;
height: 210px;
width: 210px;
background-color: red;
padding: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 150px;
width: 150px;
background-color: lightblue;
padding: 10px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 100px;
width: 100px;
background-color: yellow;
padding: 5px;
margin: 10px;
left: 60px;
top: 60px;
}
</style></head><body><div class="box1">
Box 1
</div><div class="box2">
Box 2
</div><div class="box3">
Box 3
</div></body></html>
Leave a Reply