Z-Index Property In CSS

Karthikeyan K

6y29.6k25100Article

HTML CSSCSS PropertyZ-Index Property

25 Comments

Join the conversation! Your thoughts help the community grow.

Prasanna Murali10y ago
Nice one....
Karthikeyan K11y ago
Thank you Santhakumar sir...
Karthikeyan K11y ago
Thank you Sumit sir...
Santhakumar Munuswamy11y ago
Thanks for nice share
Sumit Joshi11y ago
Nice Share.
Karthikeyan K11y ago
Thank you Pankaj...
Pankaj Kumar Choudhary11y ago
Nice Explain Karthikeyan Sir..........
Karthikeyan K11y ago
Thank you Ankit Bansal sir
Karthikeyan K11y ago
Thank you Upendra Pratap Shahi sir
Ankit Bansal11y ago
thanks for sharing...
Upendra Pratap Shahi11y ago
thanks for sharing....good one
Karthikeyan K11y ago
Thank you Rahul Borate sir..
Karthikeyan K11y ago
Thank you Rajeesh Menoth sir...
Karthikeyan K11y ago
Thank you Jaipal Reddy sir...
Karthikeyan K11y ago
Thank you Kamlesh Bhor sir...
Karthikeyan K11y ago
Thank you Rakesh Chavda sir...
Karthikeyan K11y ago
Thank you Shridhar Sharma sir...
Karthikeyan K11y ago
Thank you Mohammed Ibrahim sir...
Rahul Borate11y ago
Nice
Rajeesh Menoth11y ago
Nice Share...
Jaipal Reddy11y ago
nice one.
Kamlesh Bhor11y ago
Thanks for sharing...
Rakesh11y ago
Good one
Shridhar Sharma11y ago
good one Karthikeyan K
Mohammed Ibrahim11y ago
thanks for sharing information...

Introduction

Z-index is used for serves to stabilize the order of elements that are in the overlap.

Z-Index is an important property of CSS. The z-index property specifies the stack order of an element and its descendants. The z-index property in CSS controls the vertical stacking order of elements that overlap. When elements overlap, z-order determines which one covers the other.

An element with a greater stack order is always in front of an element with a lower stack order. An element with a larger z-index generally covers an element with a lower one. The “Stack Order” refers to the element’s position on the Z-axis (as opposed to the X-axis or Y-axis). A higher z-index value means the element will be closer to the top of the stacking order.

Z- index Syntax

z-index: auto| number | initial | inherit;

Z- index: auto

This is the default setting and it attributes the same value to both the element and the parent, if no value is defined for the parent then the value is zero (0);

Z- index: integer number

Z-index: 1
Z-index: 2
Z-index: 2

Z- index: negative number

Z-index: -1

Z- index: inherit

Takes the same specified value as the property for the element's parent.

Example

The following is the HTML code I used for this tutorial.

HTML: Structure

<!DOCTYPE html>
<html>
<head>
<title>Z-Index tutorial</title>
</head>
<body>
<div id="one">One</div>
<div id="two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>
<div id="Five">Five</div>
</body>
</html>

Use CSS code to make them look and feel for all the HTML elements as we used before in the HTML part. The following is the CSS code I have used in this tutorial.

CSS: Rule

#
one {
border: solid 5 px silver;
background - color: Aqua;
position: absolute;
z - index: 1;
opacity: 0.5;
height: 100 px;
width: 100 px;
}#
two {
border: solid 5 px silver;
background - color: Green Yellow;
position: absolute;
top: 30 px;
left: 35 px;
z - index: 2;
opacity: 0.5;
height: 100 px;
width: 100 px;
}
#
Three {
border: solid 5 px silver;
background - color: Coral;
position: absolute;
top: 60 px;
left: 60 px;
opacity: 0.5;
z - index: 3;
height: 100 px;
width: 100 px;
}
#
Four {
border: solid 5 px silver;
background - color: Yellow;
position: absolute;
top: 90 px;
left: 90 px;
opacity: 0.5;
z - index: 4;
height: 100 px;
width: 100 px;
}
#
Five {
border: solid 5 px silver;
background - color: MediumSpringGreen;
position: absolute;
top: 120 px;
left: 120 px;
opacity: 0.5;
z - index: 5;
height: 100 px;
width: 100 px;
}

Complete code

<!DOCTYPE html>
<html>
<head>
<title>Z-Index tutorial</title>
<style>
#one {
border: solid 5px silver;
background-color: Aqua;
position: absolute;
z-index: 1;
opacity: 0.5;
height: 100px;
width: 100px;
}
#two {
border: solid 5px silver;
background-color: Green Yellow;
position: absolute;
top: 30px;
left: 35px;
z-index: 2;
opacity: 0.5;
height: 100px;
width: 100px;
}
#Three {
border: solid 5px silver;
background-color: Coral;
position: absolute;
top: 60px;
left: 60px;
opacity: 0.5;
z-index: 3;
height: 100px;
width: 100px;
}
#Four {
border: solid 5px silver;
background-color: Yellow;
position: absolute;
top: 90px;
left: 90px;
opacity: 0.5;
z-index: 4;
height: 100px;
width: 100px;
}
#Five {
border: solid 5px silver;
background-color: MediumSpringGreen;
position: absolute;
top: 120px;
left: 120px;
opacity: 0.5;
z-index: 5;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="one">One</div>
<div id="two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>
<div id="Five">Five</div>
</body>
</html>

Output

Conclusion

I hope you liked this useful article. It will be useful for HTML and CSS beginners. Please provide your valuable feedback and suggestions.

Live demo link: Jsfiddle

References