CSS z-index 属性指定元素及其后代或者弹性项目（item）（item）的 z 顺序。
z-order 是 z 轴上元素的顺序。
元素的 z-index 指定其在堆叠上下文中的顺序。
堆叠上下文是一组具有共同父级的元素。
具有较高堆栈顺序的元素位于具有较低堆栈顺序的元素之前。
具有非静态定位的元素位于具有默认静态定位的元素之上。
z-index 属性仅影响具有非“静态”值的定位元素。
| 初始值 | auto |
|---|---|
| 应用于 | 定位元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.zindex =“-1”; |
语法
z-index: auto | number | initial | inherit;
具有负值的 z-index 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
position: absolute;
left: 0;
top: 10px;
z-index: -1;
}
</style>
</head>
<body>
<h2>Z-index 属性示例</h2>
<img src="/onitroad-logo-black.png" alt="onitroad logo" width="200" height="100">
</body>
</html>
具有正值的 z-index 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</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 属性示例</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>
CSS z-index 属性值说明
| 值 | 描述 |
|---|---|
| auto | 生成的框的堆栈级别等于其父母。这是此属性的默认值。 |
| number | 由数字指定的生成框的堆栈级别。负值有效。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:53 来源：oir作者：oir