z-index的作用
很多时候需要把一个元素覆盖到另一个元素之上，比如登入弹出框等，这个时候就需要z-index属性出场了。所以呢，z-index就是调节层的显示优先级，决定哪个显示在最上方。作用范围就是Positioned element，比如绝对定位，相对定位，固定定位。
层叠上下文（The stacking context）中的z-index
先看下面的关系图：
这是效果：
我们会发现虽然DIV4的index最大，但是它还是被别的元素覆盖了，这是为什么呢？
简单的理解就是z-index在不同的地方有不同的权重，在最高级（root）权重最高，相邻元素（sibling）嵌套一层权重就低一级。对于上面的例子我们可以这么计算：
- DIV1--->5
- DIV2--->2
- DIV3--->4
- DIV4--->4.6
- DIV5--->4.1
- DIV6--->4.3
这样计算一般的z-index嵌套就OK啦。
不用z-index的堆叠（stacking）
两条原则：
- 没有指定z-index值的positioned element，他们的堆叠顺序取决于在HTML文档中的顺序，越靠后出现的元素，位置越高；
- 非positoned element元素，不管在HTML中出现的顺序如何，总是在positioned element元素下方；
例子：
层叠与浮动之间的关系
non-positioned block的背景和边界没有被浮动元素影响，但是元素中的内容被浮动元素影响了（浮动布局的之后注意这个特性）。
层叠顺序：
- 根元素的背景和边界；
- 在普通流中的子代元素；
- 浮动元素；
- 普通流中的内联子代元素；
- 定位了的元素；
例子：
z-index数值分配
随便打开一个网站的首页，查看源码之后发现，z-index的数值乱七八糟，那应该怎么用合适呢？
我采取的办法是，把100设置为1档，如果需要堆叠三个层，从上到下分别是DIV3，DIV2，DIV1。那么DIV1的z-index赋值为100，DIV2的z-index赋值为200，DIV3的z-index赋值为300，这样如果将来在DIV1和DIV2之间加入一层的话还有很多余量可以选择。如果三个之间不留空隙的话以后插入一个新层就不方便啦。这样还有一个好处，就是通过查看z-index的数值可以很方便的判断当前元素位于哪一层。
既定位了然后也浮动
浮动和相对定位可以一起使用；
浮动和绝对定位不能一起使用（浮动不起任何作用）。