HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The z-index property specifies the stack order of an element
When elements are positioned, they can overlap other elements.
The z-index
property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Because the image has a z-index of -1, it will be placed behind the text.
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
z-index
only works on positioned elements (position: absolute,
position: relative, position: fixed, or position: sticky) and flex items
(elements that are direct children of display: flex elements).
Here we see that an element with greater stack order is always above an element with a lower stack order:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
If two positioned elements overlap each other without a z-index
specified, the element defined last in the HTML code will be shown on top.
Same example as above, but here with no z-index specified:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Both the header and the paragraph are positioned at the top of the page.
Make sure that the header is placed on top of the paragraph.
<style> { position: absolute; top: 0; : 1; } { position: absolute; top: 0; : 0; } </style> <body> <h1 id="mytitle">This is a heading</h1> <p id="myintro">This is a paragraph</p> </body>
Property | Description |
---|---|
z-index | Sets the stack order of an element |