对z-index片面的理解
之间对z-indx的理解还是非常的片面，就以为它是一个定义元素在z轴上位置的一个因子，但是后来发现并没有那么简单。
首先z-index其实只能在添加了非静态定位的元素(也就是position:!static)上使用，如果元素不是定位元素，那么添加的z-index是无效的。
层叠上下文
说白了，层叠上下文就是有一个元素形成的，因为他的图层升高了，他的子元素们就处在了他的层叠上下文中。层叠上下文是由满足条件的元素组成的：下面是详细条件的链接(developer.mozilla.org/zh-CN/docs/…) 根据这个链接中给出的代码，可以的到如下的结果：
可以看出Element#4,Element#5,Element#6都是Element#3的子元素，这三个子元素同属于一个层叠上下文，它们进行比较。然后它们和Element#3作为一个整体与Element#3的兄弟元素进行比较。所以可以看出尽管Elment#4的z-index为6，但是他还是在Element#1的下面。
层叠顺序
如果说层叠上下文是一个概念，那么层叠顺序就是一个规则。在不考虑CSS3新属性的情况下，层叠顺序如下所示：
其中background/border指的是背景和边框；
行内元素的层叠顺序要比块级元素的层叠顺序要高；
<style>
.box1, .box2 {
position: relative;
z-index: auto;
}
.child1 {
width: 200px;
height: 100px;
background: #168bf5;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.child2 {
width: 100px;
height: 200px;
background: #32c292;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">
<div class="child1"></div>
</div>
<div class="box2">
<div class="child2"></div>
</div>
</body>
上面的例子虽然这两个box都设置了position,但是它们的z-index都是auto，所以并没有形成自己的层叠上下文，所以它们同时处在html根层叠上下文。那么child的层级就由它们自己的z-index决定了，因为它们都同时具备了position和z-idnex的条件。
