踩坑:前端的z-index 之bug一二（【前端 】）

IE6下浮动元素bug

给IE6下的一个div设置元素样式, 无论z-index设置多高都不起作用。这种情况发生的条件有三个：

1. 父标签position属性为relative;

2. 问题标签无position属性，不包括static;

3. 问题标签含有浮动(float)属性；

IE6/7 下均有haslayout的属性，但是IE7下无此bug，所以应该不是hasLayout属性的错误，解决方法有三：

1. position : relative 改为 position : absolute;

2. 去掉浮动；

3. 浮动元素添加position属性（如relative, absolute等）；

IE6，只认第一个爸爸

这IE6下，层级的高低不仅要看自己，还要看自己的老爸（包括祖先元素）这个后台是否够硬。用术语具体描述为： 父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。 解决方法为：给层级低的祖先元素标签相对其他要覆盖的元素添加较高层级；

IE7选z-index失效问题解决方法

绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。解决办法就是给不希望被遮挡的有定位属性的父元素设置较高的z-index层级