z-index兼容问题:关于ie6/7下的z-index

2024-07-11 09:01:41

字体：大中小

来源：转载

供稿：网友

武林网(www.vevb.com)文章简介：这里要讨论的是最近在项目上对z-index在ie6下自己的一个认识，希望能帮助在z-index兼容上遇到问题的同行一个参考。

z-index这个属性其实在挺多地方都会用到，在百度上搜索也有大量关于z-index的篇幅去阐述这个属性，特别是在ie6下的z-index处理有更多的相关文章，本文就不再围绕z-index这一属性的基础展开叙述。这里要讨论的是最近在项目上对z-index在ie6下自己的一个认识，希望能帮助在z-index兼容上遇到问题的同行一个参考。

首先是demo，点击就可以看到相关的demo了，这个demo就是一个分类导航的模块，实现的功能是鼠标经过时当前标签切换背景以及弹出相关层，代码的结构好坏不做进一步探讨。我们继续来看z-index这个东西。

首先我是这样处理，所有a标签z-index都为10，经过弹出层z-index为20,当前a标签z-index为30,这样在chrome、firefox、ie9/8都达到了预期的效果（设置z-index的过程当然要顺便设置position这个东西，如果你有先看过网上的文章也会知道。）

在首次完成后ie6/7并不兼容，也就是你现在所看到的demo（你可以放到ie6/7里看看），经过弹出层被其他a标签遮住了。按照平时的惯例依照直觉z-index:9999；position:relative;zoom:1各种各样的属性都用上了，这个层还是死死的躺在其他a标签下面。
没办法，看来乱碰撞不能解决问题，只能用理性去剥开ie6下z-index的沉沦原因。据我所知（不知道什么时候记住的）ie6下的z-index比较是看他们的老大（父级）的比拼，也就是说谁的老大高级（z-index），往往它们也就跟着上位了。

按着刚才描述的逻辑去思考这个demo在ie6/7下的问题，目前所有a标签都是同级（z-index:10；），也就是说所有堂口的老大都是10级的，他们的小弟肯定不会大过他们，这样想来难怪经过弹出层在其他a下面了，鉴于这种情况，我只能把当前a标签的老大li再提高一个级别，使鼠标经过的当前a标签以及弹出层整体提高一个档次，这样就不会给其他a标签遮住了。

关于ie6/7下的z-index说到底其实就是拼爹，谁的爹大谁就在上面（大部分如此，不排除其他情况）。如果你没有得到答案我会在收到一条评论后公开～最后再补充一句，尼玛的ie6！！

上一篇：div和css网页制作:初学者使用div和css误区

下一篇：网页制作技巧:清除浮动和图片水平垂直居中

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注