z-index
CSS z-index Property
The CSS z-index property specifies the z-order of an element and its descendants or flex items. The z-order is the order of elements on the z-axis.
The z-index of an element specifies its order inside a stacking context. A stacking context is a group of elements that have a common parent.
The element which has the higher stack order is in front of the element with a lower stack order. Elements having non-static positioning are on top of elements with default static positioning.
The z-index property affects only positioned elements that have a value other than “static”.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | Positioned elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | CSS2 |
| DOM Syntax | object.style.zIndex = “-1”; |
Syntax
Syntax
z-index: auto | number | initial | inherit;
Example of the z-index property with a negative value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
left: 0;
top: 10px;
z-index: -1;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<img src="/build/images/w3cdoc-logo-black.png" alt="w3cdoc logo" width="200" height="100">
</body>
</html>
Example of the z-index property with a positive value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue,
#green,
#grey {
position: absolute;
width: 150px;
height: 150px;
color: #eee;
opacity: 0.95;
padding: 15px;
line-height: 100px;
text-align: center;
}
#blue {
z-index: 1;
background-color: #1c87c9;
top: 60px;
left: 50px;
line-height: 1;
}
.black {
height: 80px;
width: 160px;
background-color: #000;
line-height: 100px;
bottom: 20px;
position: absolute;
z-index: 10;
}
#green {
z-index: 2;
background-color: #8ebf42;
top: 100px;
left: 170px;
}
#grey {
background-color: #666;
top: 200px;
left: 100px;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<div class="container">
<div id="blue">
Blue
<div class="black">Black</div>
</div>
<div id="green">Green</div>
<div id="grey">Grey</div>
</div>
</body>
</html>
Result
Values
Values
| Value | Description | Play it |
|---|---|---|
| auto | The stack level of the generated box is equal to its parents. This is the default value of this property. | Play it » |
| number | The stack level of the generated box specified by numbers. Negative values are valid. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |