层叠黄金准则
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。
层叠上下文
-
根层叠上下文
页面根元素，可以看成是<html>元素。因此，页面中所有的元素一定处于至少一个“层叠结界”中。 -
定位元素与传统层叠上下文
position: relative/absolute，当其 z-index 值不是 auto 时，会创造层叠上下文。
几个学习例子
<div style="position: relative; z-index: auto">
<img src = "百事.jpg" style="position: absolute; z-index: 2;">
</div>
<div style="position: relative; z-index: auto">
<img src = "可口.jpg" style="position: absolute; z-index: 1;">
</div>
首先z-index:auto 两者比较不受父级影响，z-index：2的在上面。
<div style="position: relative; z-index: 0;">
<img src = "百事.jpg" style="position: absolute; z-index: 2;">
</div>
<div style="position: relative; z-index: 0;">
<img src = "可口.jpg" style="position: relative; z-index: 1;">
</div>
z-index: 0，创建了一个层叠上下文。层叠规则发生变化，后来者居上。z-index不起作用。
还有很多细节没有理清，而且《css世界》上还有对css3的补充。建议有兴趣可以去书上看看。
----end---
