ie下的css层叠z-index各种问题详细整理( 二 ) _云知道

另，在同一根层叠上下文中，同为 z-index:auto 的定位元素【p1】和【p3】，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示，又，【p2】层叠上下文的层叠级别为正数，所以【p2】的层叠级别要比【p3】高。因此，它们在 Z 轴上的顺序为：（遵循 back-to-font）【p1】 - 【p3】 - 【p2】
以上为标准浏览器下的情况。
而在 IE6 IE7 E8(Q) 下，定位元素【p1】和【p3】都创建了新的局部层叠上下文，在同一根层叠上下文中，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示。此时，由于【p2】处于【p1】的层叠上下文中，所以【p2】在 Z 轴上要比【p3】靠后。
在来一个例子：

复制代码代码如下:
style
.parent{width:200px; height:200px; padding:10px;}
.sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
.lt50{left:50px;top:50px;}
/style
div style="position:absolute; background:lightgrey;" class="parent"
div style="position:absolute;z-index:20;background:darkgray;" class="sub"20/div
div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50"10/div
/div
div style="position:absolute;left:80px;top:80px;background:black;" class="parent"
div style="position:absolute;z-index:2;background:darkgray;" class="sub"2/div
div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50"1/div
/div

解决办法
理解层叠上下文、层叠级别与 ’z-index’ 之间的关系。在可能出现定位元素相互覆盖的情况时，明确指定定位元素的 ’z-index’ 特性，避免此问题的出现。
注：此段内容基本都是来自w3help 。
在IE6下z-index的问题
我不是一个喜欢抱怨的人， so...有关抱怨IE6的话在此省略500字...
先上个图说说我在工作中实际遇到的问题：

图片的上半部分就是在非IE6下的交互，图片下半部分是在IE6下的显示效果，当打开虚拟机测试的时候我表示瞬间碉堡了，囧...在IE6下这个tips被盖住了，很明显这个不是我想要的效果，可是为什么会出现这个情况类？接着往下看。
分析此类问题的原因：
1.这是个拼爹的时代，在IE6下很好的体现了这点...囧
按照正常的思维， z-index层级越高，内容越应该在上面显示，在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6 。
在IE6下的层级高低不仅要看本身，还要看自己的父元素是否给力：父元素的 position 属性为 relative或absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。点击 Result 可以看到HTML对应的VIEW 。
从以上的代码中可以看到最内层div的z-index属性为999 ，其父元素的z-index属性为100 。按照正常的显示逻辑，图片应该正常显示且不会被背景色所影响，可是在IE6下会有问题，直接上图片会比较直观，比较看看IE6下和非IE6浏览器的显示效果。chrome、FF和opera都经过测试了，为了不使图片过多我就拿个chrome的截图吧。