<!Doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>深入理解CSS中的层叠上下文和层叠顺序</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #ddd;
}
p {
position: absolute;
top: 10%;
right: 10%;
font-size: 26px;
text-transform: uppercase;
text-shadow: 5px 0 5px #ccc;
z-index: 8;
}
p > span {
letter-spacing: 5px;
font-size: 36px;
font-weight: bold;
}
ul {
/*display: block;*/
overflow: hidden;
width: 860px;
height: 665px;
margin: 0 auto;
padding-top: 80px;
}
li {
font-size: 18px;
color: white;
display: block;
text-align: left;;
width: 345px;
height: 145px;
padding: 10px;
border: 5px solid #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
position: absolute;
}
li:first-child {
background: #b475c1;
}
li:nth-child(2) {
background: #8975c1;
}
li:nth-child(3) {
background: #4f70c1;
}
li:nth-child(4) {
background: #51cd8e;
}
li:nth-child(5) {
background: #9cd262;
}
li:nth-child(6) {
background: #d9ac4d;
}
li:nth-child(7) {
background: #d83953;
}
</style>
</head>
<body>
<p><span>css层叠顺序</span><br />
ccs stacking order</p>
<ul>
<li>层叠上下文<br />
background/border</li>
<li>负z-index</li>
<li>block块状水平盒子</li>
<li>float浮动盒子</li>
<li>inline/inline-block水平盒子</li>
<li>z-index:auto或看成z-index:0<br />
不依赖z-index的层叠上下文</li>
<li>正z-index</li>
</ul>
<script>
order();
function order() {
var li = document.getElementsByTagName("li");
var i = 0;
for (var i = 0; i < li.length; i++) {
li[i].style.marginLeft = i * 80 + "px";
li[i].style.marginTop = i * 75 + "px";
li[i].style.zIndex = i;
}
}
</script>
</body>
</html>
