【前端】CSS 设置 z-index 不生效的问题

在写项目当中，发现设置了div元素 A 被 position: absolute 的 div 元素 B 覆盖住了。而给这个被遮住的元素 A 设置 z-index 竟然没有生效。通过查找发现，要让z-index起作用的前提，就是元素的position属性要是relative，absolute或是fixed。 

---

情况一、非IE6浏览器

---

1.1 可能原因

• 父标签的属性为 relative
• 出问题的标签没有设置 position 属性
• 出问题的标签含有 float 属性

1.2 解决方式：

• 将父标签的属性从 relative 改为 absolute
• 给标签增加 position 属性
• 去除浮动

 

情况二、IE6 浏览器

---

2.1 原因

IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级

 

2.2 解决方式

在第一个relative属性加上一个更高的层级（z-index:1）