IE6下 CSS z-index属性失效原因浅析
近日，小码哥遇到一个在IE6下z-index属性失效问题！让鄙人纠结了好半天。心里那个不爽啊！最终虽然解决了俺遇到的问题，同时也做出了如下小结：（希望对“码上赚钱”的侬有所帮助）。
其实z-index属性在标准浏览器下其属性值完全按照大小来衡量谁上谁下的。但是在这个各种浏览器横行的年代，又遇到万恶而变态的IE、7时。很多问题就接踵而至了。
在IE6、7下针对z-index属性的问题，最常遇到的就是不管对z-index设置多高的值，哪怕是其父级元素的十倍百倍，该层级不显示还是不显示。那么到底是哪些原因造成的呢？
鄙人总结如下：（以上纯属扯淡，只为博君腹诽！）
当前层有与浮动float相关的属性时。
当前层有与浮动float相关以及与定位相关的position属性时。此两个属性在CSS中算是近亲，都有脱离文本流的作用。
当前层以及当前层的父级层有position属性时。
由于鄙人对CSS还不很精通，仅仅略知皮毛。故以上三种情况是在下总结的原因，至于根本原因，还有待考证。如果你遇到了相关问题，不防注意以上三种可能。
下面是解决办法：
若是当前层的浮动属性不是必须能去掉则去掉。
若是浮动问题不能去掉，则考虑position属性的相对或绝对关系。变换position属性的值。
避免相邻父子层出现父级position：relative；而子级（当前层）position：absolute；如出现此种情况，可把父级的position属性去掉，改为子级（当前层）针对其祖父级或根节点的相对定位。也就是在其祖父级或以上级添加position：relative；
以上就是相关解决办法，也不是绝对的。需要因情况而定！
本文出自 “关注技术专注前端” 博客，请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1547709
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
