z-index失效难以走出的巨坑

浅说position定位及z-index使用（才疏学浅，请多指教）

1、Z-index的运用是需要条件的,与其相关的属性就是position属性，使用前提 z-index只能在position属性值为relative或absolute或fixed的元素上有效。

Z-index:

值	描述
auto	默认。和文档流一个层级，不产生堆叠上下文。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

2、基本原理 z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。

3、同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面,所谓后来者居上原则。 

4、同级元素的z-index值如果不相同，谁大谁上原则。

5、如果定位元素z-index发生嵌套（父子关系处理）：

       (1)、如果父元素z-index有效（已定位并且设置的z-index的值不是默认值auto），和父亲相比，子元素无论是否设置z-index都和父元素一致，并会显示在父元素上方，尽管子元素设置z-index比父元素小，但是子元素仍然出现在父元素上方（此谓长江后浪推前浪）；和兄弟级别元素相比用自己的z-index，和兄弟元素之外的元素比用父亲的z-index去比(就是说只要父元素z-index有效的话，这个div的Z-index就只能和兄弟元素比较，除兄弟元素外的都要用父元素的Z-index去比);

     （2）、否则如果父元素z-index失效（未定位或者使用默认值auto），那么定位子元素的z-index设置生效，

所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的结点关系，多半是因为其父结点含影响了子节点的z-index。 

还有一点需要注意，负值的z-index也依照大小比较的原理，但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题，请谨慎使用。

总结下来就是

1. 同一层叠上下文(上下文可以理解为当前环境)中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。

2. 不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。