在写项目当中,发现设置了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)