首页 > 代码库 > IE6下 CSS z-index属性失效原因浅析

IE6下 CSS z-index属性失效原因浅析

近日,小码哥遇到一个在IE6z-index属性失效问题!让鄙人纠结了好半天。心里那个不爽啊!最终虽然解决了俺遇到的问题,同时也做出了如下小结:(希望对“码上赚钱”的侬有所帮助)。


其实z-index属性在标准浏览器下其属性值完全按照大小来衡量谁上谁下的。但是在这个各种浏览器横行的年代,又遇到万恶而变态的IE、7时。很多问题就接踵而至了。

在IE6、7下针对z-index属性的问题,最常遇到的就是不管对z-index设置多高的值,哪怕是其父级元素的十倍百倍,该层级不显示还是不显示。那么到底是哪些原因造成的呢?

鄙人总结如下:(以上纯属扯淡,只为博君腹诽!)


  1. 当前层有与浮动float相关的属性时。

  2. 当前层有与浮动float相关以及与定位相关的position属性时。此两个属性在CSS中算是近亲,都有脱离文本流的作用。

  3. 当前层以及当前层的父级层有position属性时。


由于鄙人对CSS还不很精通,仅仅略知皮毛。故以上三种情况是在下总结的原因,至于根本原因,还有待考证。如果你遇到了相关问题,不防注意以上三种可能。

下面是解决办法:


  1. 若是当前层的浮动属性不是必须能去掉则去掉。

  2. 若是浮动问题不能去掉,则考虑position属性的相对或绝对关系。变换position属性的值。

  3. 避免相邻父子层出现父级position:relative;而子级(当前层)position:absolute;如出现此种情况,可把父级的position属性去掉,改为子级(当前层)针对其祖父级或根节点的相对定位。也就是在其祖父级或以上级添加position:relative;


以上就是相关解决办法,也不是绝对的。需要因情况而定!


本文出自 “关注技术专注前端” 博客,请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1547709

IE6下 CSS z-index属性失效原因浅析