1、被定位（相对的，绝对的）的元素会在未定位的元素前面显示
2、同一被定为父级元素的两个元素，z-index值高的显示在前面（只对被定位元素起作用）
3、不同被定位父级元素的两个元素，前后顺序跟父级元素的的z-index值高低有关，父级高则高。
4、opacity影响元素的先后顺序，试验确实如此：将原本显示在前面的元素的opacity值设置为小于1的数之后，该元素会显示在最后面？原因尚不清楚。
例子：
<!doctype html>
<html>
<head>
<style type="text/css">
.red, .green, .blue {position: absolute;display: block;width: 100px;height: 100px;}
.red {background: red;z-index: 1;left: 0;top: 0}
.green {background: green;left: 20px;top: 20px;}
.blue {background: blue;left: 40px;top: 40px;}
div:first-child {opacity: .99;}
</style>
</head>
<body>
<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
</body>
</html>
扫一扫
2682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
