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></pre>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 {} .box2 {position: sticky; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; margin: 10px; left: 10px; top: 80px;} .box3 {position: sticky; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 40px; top: 200px;} </style></head><body><p>Move cursor upward to see the effect.</p><div class="box1">position: sticky; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 10px; left: 70px;</div><div class="box2">CSS z-index: 1</div><div class="box3">CSS z-index: 2</div></body></html>CSS z-index: 3CSS 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 {} .box1 {position: relative; height: 350px;} .box2 {position: fixed; height: 200px; width: 280px; background-color: #f0baba; z-index: -3; text-align: center; padding: 3px; left: 10px; top: 10px;} .box3 {position: fixed; height: 140px; width: 220px; background-color: #eae98f; z-index: -2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px;} h3 {position: fixed; height: 90px; width: 160px; background-color: #b7c8ae; z-index: -1; text-align: center; padding: 5px; margin: 20px; left: 50px; top: 50px;} </style></head><body><h3>Scroll down the content to see the effect.</h3><div class="container"><div class="box1">margin-top: 320px;CSS z-index: -3 </div><div class="box2"> CSS z-index: -2 </div><div class="box3"> CSS z-index: -1 </div></div></body></html></pre>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 {} .box2 {position: static; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; margin: 10px; left: 10px; top: 10px;} .box3 {position: static; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px;} </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">position: static; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 10px; left: 50px; top: 50px;</div><div class="box2">CSS z-index: 1</div><div class="box3">CSS z-index: 2</div></body></html>CSS z-index: 3CSS 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 {} .box2 {position: relative; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; margin: 10px; left: 10px; top: 10px;} .box3 {position: relative; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px;} </style></head><body><p>The z-index property positions the element relative to its original position if position is relative.</p><div class="box1">position: relative; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 10px; left: 50px; top: 50px;</div><div class="box2">CSS z-index: 1</div><div class="box3">CSS z-index: 2</div></body></html>CSS z-index: 3
Leave a Reply