最近在写一个小项目,遇到很多小细节的问题,果然还是要实战才能知道自己的不足之处啊~回归正题,我在一个div明明设置了属性z-index,但是为什么在网页上显示无效呢?首先排除设置的层级不够的问题;然后我就去 W3School 查询了才知道问题所在。
先来看官方给的定义的用法:
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(position属性值设置除默认值static以外的元素,包括relative,absolute,fixed样式)
注意看我加粗的那句话!!!然而这只是诸“元凶之一”,我查阅了一下别的资料,还有两个条件下也能导致这个问题的出现:
* 1、父标签 position属性为relative;*
* 2、问题标签含有浮动(float)属性;*
解决方法也很简单:
1、position:relative改为position:absolute;
3、去除浮动。
还有一种比较特殊的情况也会导致这个问题:
IE6 、IE7下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。(万恶的IE6啊~ )
解决方法也很简单: 在第一个relative属性加上一个更高的层级就可以了。