z-index神奇的失效了！！！

z-index简单介绍

首先z-index只对定位元素有效，什么是定位元素呢，也就是设置了position属性的元素，position：relative--相对定位，position：absolute--绝对定位，position：fixed--固定定位，position：static静态定位，position：inherit--继承父元素定位，但

要注意并不是所有的定位设置都有效果，relative，absolute，fixed肯定是有的，inherit取决于父元素，如果父元素没有设置定位则z-index无效，注意低版本浏览器不支持这个值。最后说下static这个静态定位，其实这是默认值，表示当前元素

不进行定位，所以如果元素设置了这个属性值，其实是和没有设置是一样的，会使元素忽略掉z-index属性，使其不起作用。

z-index失效的原因

z-index无论设置多高都不起作用情况

【可能原因】

• 问题标签无position属性（除了static）

• 问题标签设置了浮动（float）属性（在IE6下，子元素如果设置浮动会影响父元素的相对定位设置，最终造成父元素的z-index属性无效。）

• 问题标签的父元素的层叠优先级比其他元素低（简单来讲，对于层叠元素的优先级对比都是在兄弟元素之间进行的，子元素的优先级并不会影响到父元素与其他兄弟元素之间的优先级关系。这里所指的层叠元素，是指有进行定位并

　　   且有设置z-index属性的元素。如果没有进行定位和设置z-index的元素，其最终层叠优先级反而由当前元素的层叠子元素决定）　

• 父元素没设置z-index（IE7以下的IE浏览器一定要注意父级元素是否有设置z-index和进行定位，因为在这几个版本的浏览器中，最终决定层叠顺序的是最顶层的父元素，算是一个兼容性问题。）　

【解决方法】

• 给问题标签设置position属性（relative、absolute、fixed）

• 解决方法有三个，第一种就是去除元素的浮动属性，第二种方法是为浮动元素添加相对定位或者绝对定位，第三种方法就是将父元素的position:relative改为position:absolute。

• 提高父标签的z-index值

• 给父元素设置z-index

参考

解决和分析css中z-index属性无效的原因