CSS - z-index Property
The z-index Property
CSS z-index property controls the stacking order of elements in a web page when they overlap in the same stacking context. Elements with a higher z-index value appear in front of elements with lower values.
The following diagram demonstrates the z-index layout for reference:
CSS z-index property can be used with positioned elements that are nested inside of other positioned elements.
Syntax
The syntax for z-index property is as follows:
z-index: auto | number | initial | inherit;
Property Values
| Value | Description |
|---|---|
| auto | It is the default value. The stack order is equal to that of the parent element. |
| <Integer> | It represents a positive or negative integer. It sets the element's stack level to the given value. |
| initial | It is used to set this property to it's default value. |
| inherit | It is used to inherit the property of it's parent element. |
Applies to
All positioned elements.
CSS z-index With auto Value
CSS z-index: auto sets the z-index of an element to its parent element's stack order. It is the default value for the z-index property.
Example
The following example demonstrates the z-index property with auto value.
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: auto;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 120px;
width: 200px;
background-color: #eae98f;
z-index: 1;
text-align: center;
padding: 5px;
margin: 20px;
left: 30px;
top: 30px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>The element with z-index value of auto appears behind the element with the z-index value of 1.</p>
<div class="box1">
<span>CSS z-index: auto</span>
<div class="box2">
<span>CSS z-index: 1</span>
</div>
</div>
</body>
</html>
CSS z-index With Positive Integer
CSS z-index property can have a positive integer value. The element with a higher integer value will appear above elements with lower values in the stacking order.
Example
The following example demonstrates the z-index property with a positive integer value.
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>The element with z-index value of 1 appears behind the element with the z-index value of 2 and 3.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>
CSS z-index With Negative Integer
You can also use negative integer values for the z-index property. An element with a negative z-index value will be stacked below elements with a higher z-index value.
Example
The following example demonstrates the z-index property with a negative integer value.
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: -3;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: -2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: -1;
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>The element with z-index value of -3 appears behind the element with the z-index value of -2 and -1.</p>
<div class="box1">
CSS z-index: -3
</div>
<div class="box2">
CSS z-index: -2
</div>
<div class="box3">
CSS z-index: -1
</div>
</body>
</html>
Placing Text Over Image
The z-index property can be used for placing a text over an image and vice-versa.
Example
In this example, we are placing a text over an image using CSS z-index property and position property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Displaying Text Over Image</title>
<style>
.container {
position: relative;
width: 500px;
}
img {
display: block;
}
.txt {
position: absolute;
top: 20%;
left: 35%;
transform: translate(-50%, -50%);
color: white;
font-family: Verdana, sans-serif;
font-size: 16px;
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h2>CSS z-index Property</h2>
<div class="container">
<img src="/html/images/test.png" alt="Logo">
<p class="txt">This text displays over the photo.</p>
</div>
</body>
</html>
CSS z-index With Sticky Position
The z-index can be used with position:sticky to fix the element's position on scroll.
Example
In this example, we have used the sticky value with z-index property to fix the position of div boxes on scroll.
<html>
<head>
<style>
.box1 {
position: sticky;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 80px;
}
.box2 {
position: sticky;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 40px;
top: 200px;
}
.box3 {
position: sticky;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 70px;
}
</style>
</head>
<body>
<p>Move cursor upward to see the effect.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>
CSS z-index With Fixed Position
The z-index property is used with the position:fixed value to fix an element at the top of the content when the user scrolls down.
Example
In the example, we have used position:fixed value to fix the text content on top while scrolling.
<html>
<head>
<style>
.container {
position: relative;
height: 350px;
}
.box1 {
position: fixed;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: -3;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: fixed;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: -2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: fixed;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: -1;
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
h3 {
margin-top: 320px;
}
</style>
</head>
<body>
<h3>Scroll down the content to see the effect.</h3>
<div class="container">
<div class="box1">
CSS z-index: -3
</div>
<div class="box2">
CSS z-index: -2
</div>
<div class="box3">
CSS z-index: -1
</div>
</div>
</body>
</html>
CSS z-index With Static Position
The position:static property value makes the use of z-index property ineffective. The z-index property does not affect the stacking order of elements that have the static value of position property.
Example
The following example shows that the z-index property is ineffective when position:static property is used:
<html>
<head>
<style>
.box1 {
position: static;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: static;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: static;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<p>The z-index property has no effect on the stacking order of elements if the position property is set to static.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>
CSS z-index With Relative Position
The position:relative property can be used with z-index property to position the element relative to its original position in the document flow.
Example
The following example demonstrates use of position:relative property value with z-index property.
The example shows that when elements have the position: relative property, the z-index property positions the element relative to its original position in the document flow.
<html>
<head>
<style>
.box1 {
position: relative;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: relative;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: relative;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<p>The z-index property positions the element relative to its original position if position is relative.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>