在做项目的过程中遇到了这样的问题,即z-index为什么会有时候没有效果?
原理
我们首先来看看MDN里,z-index是怎么描述的
z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素(即position属性值不是static的元素),z-index 属性指定:
元素在当前堆叠上下文中的堆叠层级。
元素是否创建一个新的本地堆叠上下文
z-index 可以取值auto
或者数字(auto会互相层叠,但是只要指定正的z-index,就会比auto高)
需要注意的是z-index需要是对有position
不为static
属性的元素才做效的
一般情况
- 该标签无
position
属性 - 该标签父元素是relative(IE6)
- 该标签为浮动元素(IE6)
解决办法
添加position标签