Introduction to CSS z-index
The z-index property in CSS decides the stack order of the element like image or box or any character content or button etc. An element with highest or greater stack order value will be always in front of the element with lower stack order value. Keep in mind that z-index only worked with position elements like position: absolute, position: relative, position: sticky. This clears a point that z- index property can be applied with positioned elements in z order. Element with a higher z index value always overlapped by the z index with smaller value.
Real-Time Example: We have requirement that we want overlap image with a content. In general CSS properties can’t provide this feature, this all will give the image on top of the text but we don’t want this. So by using z-index property we can make content on top of the image.
Why we use CSS in HTML?
- Provide common Logic between all the pages instead of writing same style logic in each HTML page we use CSS file for writing common logic.
- And it includes CSS page in each HTML page with <link> tag.
How does Z-index property work in CSS?
Z- index property only works with position elements like:
- position: absolute
- position: relative
- position: sticky
Syntax:
positioned element{
position: absolute or relative or sticky;
left: value;
top: value;
z-index: value;
}Z-index image with values:
Examples of CSS z-index
Given below are the examples:
Example #1
Z index with an Image.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Z index</title>
<link rel="stylesheet" href="ZIndexFile.css">
</head>
<body>
<h1>Z Index with Image</h1>
<div class="content">
<img alt="" src="bs2.jpg">
<p>The z-index property in CSS decides the stack order of the
element like image or box or any character content or button etc. An
element with highest or greater stack order value will be always in
front of the element with lower stack order value. Keep in mind that
z-index only worked with position elements like position: absolute,
position: relative, position: sticky. This clear a point that z-
index property can be applied with positioned elements in z order.
Element with a higher z index value always overlapped by the z index
with smaller value.</p>
<p>Real Time Example: We have requirement that we want overlap
image with a content. In general CSS properties can't provide this
feature, this all will give the image on top of the text but we don't
want this. So by using z-index property we can make content on top of
the image.</p>
</div>
</body>
</html>CSS Code: ZIndexFile.css
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -10;
}
h1
{
color:red;
text-align: center;
}
p
{
color:brown;
border: solid 2px yellow;
font-size: 28px;
}Output:
Explanation:
- As we see in the above we got text on top of the image, but if remove the z index property then text is overlapped by image.
Example #2
Z index with an Image.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Z index</title>
<link rel="stylesheet" href="ZIndexFile.css">
</head>
<body>
<h1>Z Index with Content</h1>
<div class="topDiv">
The z-index property in CSS decides the stack order of the element
like image or box or any character content or button etc. An element
with highest or greater stack order value will be always in front of
the element with lower stack order value. Keep in mind that z-index
only worked with position elements like position: absolute, position:
relative, position: sticky. This clear a point that z- index property
can be applied with positioned elements in z order. Element with a
higher z index value always overlapped by the z index with smaller
value. <span class="spanContent">Real Time Example: We have
requirement that we want overlap image with a content. In general CSS
properties can't provide this feature, this all will give the image
on top of the text but we don't want this. So by using z-index
property we can make content on top of the image.</span> <span
class="boxSpan">Paramesh Box</span>
</div>
<p></p>
<p></p>
</body>
</html>CSS Code: ZIndexFile.css
h1 {
color: blue;
text-align: center;
}
.topDiv {
position: relative;
height: 8em;
color: navy;
margin-bottom : 1em;
margin-top : 2em;
z-index: 1;
border: solid;
margin-bottom: 1em;
margin-top: 2em;
font-size: 28px;
}
.spanContent {
position: absolute;
width: 80%;
background : fuchsia;
left: 60px;
top: 3em;
z-index: 3; <!-- z index value is greater so it always on top of all the elements -->
font-size: 28px;
}
.boxSpan {
position: absolute;
z-index: 2; <!-- z index value is greater than topDiv content so it overlaps it -->
width: 20%;
top: -25px;
height: 7em;
opacity: 0.9;
left: 65%;
background : lightgreen;
font-size: 28px;
}Output:
Explanation:
- As you can see in the above which ever z index value is greater that is always overlapping lower index value content.
Example #3
Z index with an Image.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Z index</title>
<link rel="stylesheet" href="ZIndexFile.css">
</head>
<body>
<h1>Z Index with Box Shapes</h1>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>CSS Code: ZIndexFile.css
h1 {
color: green;
text-align: center;
}
.box1 {
position: relative;
top: 10px;
left: 80px;
z-index: 2 background-color: red;
width: 400px;
height: 200px;
}
.box2 {
position: relative;
top: -60px;
left: 35px;
z-index: 1;
background-color: yellow;
width: 400px;
height: 200px;
}
.box3 {
position: relative;
top: -220px;
left: 120px;
z-index: 3;
background-color: green;
width: 400px;
height: 200px;
}
.box4 {
position: relative;
top: -320px;
left: 220px;
z-index: 4;
background-color: orange;
width: 400px;
height: 200px;
}
.box5 {
position: relative;
top: -420px;
left: 320px;
z-index: 5;
background-color: olive;
width : 400px;
height: 200px;
width: 400px;
}Output:
Explanation:
- As you can see in the above which ever z index value is greater that is always overlapping lower index value box.
Conclusion
Z index in CSS property is used to put the any element on top of the other element. But Z index can be applied with only positioned element like absolute, relative and sticky etc.
Recommended Articles
This is a guide to CSS z-index. Here we discuss the introduction to CSS z-index along with how does Z-index property work and examples for better understanding. You may also have a look at the following articles to learn more –
