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

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐