在div布局的过程中，经常会遇到div层叠的情况，我们通常有两种解决方式：float和z-index。在大多数的情况下我们选择不占用内存的float来实现层的浮动，但是float存在着很多bug，尤其是复杂的层叠结构下很容易出现意外状况。因此在层叠结构复杂的情况下建议尽量不要使用float而使用z-index。
那么z-index的使用有什么技巧和注意事项呢？
z-index可以对你的div进行分级，取值范围：-32767~32767。z-index支持负数，div默认的层次为0，数值越大层次越高，反之越低。接下来我们来做个测试：
Css样式：
.a{300px;height:300px;background:#F00;z-index:-1;}
.b{300px;height:300px;margin:10px;background:#FF0;}
.c{300px;height:300px;margin:20px;background:#00F;z-index:1}
Html布局：
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
结果：
为什么div没有层叠在一起？
原因是Z-index 仅能在定位元素上奏效，因此我们还要对三个div加上position:absolute。
.a{300px;height:300px;background:#F00;z-index:-1; position:absolute;}
.b{300px;height:300px;margin:10px;background:#FF0;position:absolute;}
.c{300px;height:300px;margin:20px;background:#00F;z-index:1;position:absolute;}
看效果：
这里要注意，虽然我们没有对b进行z-index的设置，但是为了不影响其它层的z-index的使用我们要给它也加上position:absolute，不然会出现这样的情况：
对于层的位置我们通过top和left来改变的层的位置（相对于body），
这里在引出一个知识点，在div嵌套的情况下，父级position: relative,子级position:absolute，子级里的top、left定位是相对于父级div。
这是我写的第一篇技术贴，写的不好敬请见谅~