CSS z-index Property
- Introduction to CSS z-index property
- The syntax of CSS z-index property
- Example of CSS z-index property
Introduction to CSS z-index property
In CSS, the z-index property is used to define HTML elements in the stack order. Stack order is the order in which one element is arranged in the order of the top or bottom with another element.
For example, when you go to eat someone's wedding party, then there are plates placed in the stack order (Sequence of one over another). If the numbers are written on these plates and kept them again, then each plate represents a stack order.
The bottom plate number 1 represents the default (stack order) and top plate represents the highest stack order. If viewed in the context of a webpage, this stacking order is called z-index in webpages.
CSS provides you a z-index property to set the stack order for web elements. Through this property, you can arrange the HTML elements in the top to bottom or bottom to top stack order. In simple words, you can decide which element will be shown above or which element below.
For example, you have created four div elements whose colors are green, blue, pink and red. If you want the div of the red color, blue to be shown at the bottom thereafter pink color on it and at last green color div on the top. For this, you will give 1, 2, 3 and 4 z-index numbers respectively.
Similarly, if a div has gone behind a div while designing a web page, you can use CSS z-index property to bring it up. You can also use this property to move a div behind another div.
One thing you should always keep in mind is that z-index properties work with the same elements which are positioned. That is, this property works with those elements whose position is relative, absolute or fixed except for static (default).
The syntax of z-index Property
The general syntax for CSS z-index property has been given below.
z-index: auto | integer-number;
As you can see in the above syntax, the CSS z-index property has two possible values auto and an integer number.
When you define the auto value for this property, the stack order is automatically defined by the browser in which order the elements are placed. The last element will have a higher value.
When you assign an integer number to the value of this property, then the element shows in the same stack order. It can also be called manual z-index.
Example of CSS z-index Property
The CSS z-index property has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS z-index Property Example </title>
<style>
.Div1
{
width: 250px;
height: 250px;
background: green;
position: absolute;
top: 50px;
left: 100px;
text-align: right;
color: white;
z-index: 4;
}
.Div2
{
width: 250px;
height: 250px;
background: hotpink;
position: absolute;
top: 100px;
left: 150px;
text-align: right;
color: white;
z-index: 3;
}
.Div3
{
width: 250px;
height: 250px;
background: blue;
position: absolute;
top: 150px;
left: 200px;
text-align: right;
color: white;
z-index: 2;
}
.Div4
{
width: 250px;
height: 250px;
background: red;
position: absolute;
top: 200px;
left: 250px;
text-align: right;
color: white;
z-index: 1;
}
</style>
</head>
<body>
<div class="Div1"> <b>This is DIV1</b> </div>
<div class="Div2"> <b>This is DIV2</b> </div>
<div class="Div3"> <b>This is DIV3</b> </div>
<style>
.Div1
{
width: 250px;
height: 250px;
background: green;
position: absolute;
top: 50px;
left: 100px;
text-align: right;
color: white;
z-index: 4;
}
.Div2
{
width: 250px;
height: 250px;
background: hotpink;
position: absolute;
top: 100px;
left: 150px;
text-align: right;
color: white;
z-index: 3;
}
.Div3
{
width: 250px;
height: 250px;
background: blue;
position: absolute;
top: 150px;
left: 200px;
text-align: right;
color: white;
z-index: 2;
}
.Div4
{
width: 250px;
height: 250px;
background: red;
position: absolute;
top: 200px;
left: 250px;
text-align: right;
color: white;
z-index: 1;
}
</style>
</head>
<body>
<div class="Div1"> <b>This is DIV1</b> </div>
<div class="Div2"> <b>This is DIV2</b> </div>
<div class="Div3"> <b>This is DIV3</b> </div>
<div class="Div4"> <b>This is DIV4</b> </div>
</body>
</body>
</html>
The above example will produce the below output.
The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
ReplyDeletewebsite development