z-index

• z-index : auto | number
• z-index 属性设置元素的堆叠顺序，如果为正数，则离用户更近，为负数则表示离用户更远；
• 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；
• z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象）

1. 当两个元素位于同一容器内时，它们各自的z-index决定它们的层次

2. 当两个元素位于不同容器内时，它们容器的z-index决定它们的层次

<div style="z-index:1; background-color:#333; width:200px; height:200px; position:relative;">
    <div style="top:60px; z-index:100; background-color:#666; width:50px; height:50px; position:absolute;">
    </div>
</div>
<div style="top:-100px; z-index:2; background-color:#999; width:200px; height:200px; position:relative;">
    <div style="z-index:20; background-color:#ccc; width:50px; height:50px; position:absolute;">
    </div>
</div>

当定位元素的 'z-index' 未设置时（默认为 auto），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。

例：

<style type="text/css">
  body { margin:0; }
  .p1{ top:20px; height:50px; width:150px; background-color:blue;}
  .p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}
  .p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}
</style>

<div style="position:relative;" class="p1">1
    <div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>

效果：

解决方法：在可能出现定位元素相互覆盖的情况时，明确指定定位元素的 'z-index' 特性，避免此问题的出现。

引自：http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html 

转载于:https://www.cnblogs.com/frostbelt/archive/2012/12/17/2822135.html