Hello guys! afternoon and welcome to this new section of my tutorial on CSS. Once again i apologize for not droping any tutorial post for some time now. Without wasting much time lets go down to the topic for this tutorial.
In my last tutorial i talked about Css positioning so in this tutorial am moving on to Css layers.
Css gives you the opportunity to create layers of various divisions. The Css layers refers to applying the z-index property to elements that overlap with each other.
You can also read our tutorial post on: Css visibility
The z-index property is used along with position property to create an effect of layers. You can specify which element should come on top and which element should come at the bottom.
A z-index property can help you create a more complex webpage layouts. Below is the example which shows how to create layers in CSS.
<html>
<head>
</head>
<body>
<div style="background-color: red;
width: 250px;
height: 100px;
position: relative;
top: 10px;
left: 80px
z-index: 2">
</div>
<div style="background-color: blue;
width: 250px;
height: 100px;
position: relative;
top: -60px;
left: 35px
z-index: 1">
</div>
<div style="background-color: red;
width: 250px;
height: 100px;
position: relative;
top: -220px;
left: 120px
z-index: 3">
</div>
</body>
</html>
<head>
</head>
<body>
<div style="background-color: red;
width: 250px;
height: 100px;
position: relative;
top: 10px;
left: 80px
z-index: 2">
</div>
<div style="background-color: blue;
width: 250px;
height: 100px;
position: relative;
top: -60px;
left: 35px
z-index: 1">
</div>
<div style="background-color: red;
width: 250px;
height: 100px;
position: relative;
top: -220px;
left: 120px
z-index: 3">
</div>
</body>
</html>
You can also read our tutorial post on: Css Introduction
For those of you that are from the none English speaking countries, you can easily translate the original language of this tutorial to any other language of your choice by using the google translate tool which is available at the side bar of this web site.
Alright guys, we have come to the end of this tutorial on Css layers. Feel free to ask your questions in any area you don't understand properly, and your questions will be attended to as soon as possible.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.