Div+css层的熟练应用

在div布局的过程中，经常会遇到div层叠的情况，我们通常有两种解决方式：float和z-index。在大多数的情况下我们选择不占用内存的float来实现层的浮动，但是float存在着很多bug，尤其是复杂的层叠结构下很容易出现意外状况。因此在层叠结构复杂的情况下建议尽量不要使用float而使用z-index。

那么z-index的使用有什么技巧和注意事项呢？

z-index可以对你的div进行分级，取值范围：-32767~32767。z-index支持负数，div默认的层次为0，数值越大层次越高，反之越低。接下来我们来做个测试：

Css样式：

.a{width:300px;height:300px;background:#F00;z-index:-1;}

.b{width:300px;height:300px;margin:10px;background:#FF0;}

.c{width: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{width:300px;height:300px;background:#F00;z-index:-1; position:absolute;}

.b{width:300px;height:300px;margin:10px;background:#FF0;position:absolute;}

.c{width: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。

 

这是我写的第一篇技术贴，写的不好敬请见谅~