ie6下z-index不起作用？

最新推荐文章于 2018-09-06 17:32:31 发布

码农下的天桥

最新推荐文章于 2018-09-06 17:32:31 发布

阅读量902

点赞数

本文链接：https://blog.csdn.net/cdnight/article/details/17370357

版权

首先请明确，无论哪一个浏览器下面，z-index的元素要带有position（relative,fixed,absolute）才能起作用。

明确以后看看这个文章：

http://www.yuanchuang.net/content/14172.html

在ie6，7以外的浏览器，z-index似乎都是根据当前元素来进行z-index的布局的，但是对于ie6，ie7，似乎是层次最高的包含有position的元素（设为元素A）作为参照，假如元素A的z-index低，那么无论孩子z-index多高都会被其他元素遮住。

下面我给出一个demo，各位可以自行测试：

<!doctype HTML>
<html>
<head>
<meta charset="gb2312" />

<title></title>

</head>
<body>
<style>
#head{ background: red; width: 250px; height: 100px;}
  #left_bar{ float:left; width: 200px; height: 400px; border: 1px solid #038dd5; background: #006666; padding: 10px 0 0 10px; }
    #right_bar{ float:left; width: 150px; height: 350px; border: 1px dotted #0033FF; background: #00a89b;padding: 10px 0 0 10px; z-index: 999; }
    #left_child{ width: 100px; height: 100px; background: #038dd5;}
    #right_child{ width: 100px; height: 100px; background: #00bb00; position:relative; z-index: 9; display: block;}
#footer{ background: #00a89b; border: 1px solid #00bb00; width: 400px; height: 150px;  position: relative;}
    #mask{ position: absolute; left: 50px; top: 150px; width: 250px; height: 500px; background: darkgray; z-index: 5;}
    #mainbody{ width: 500px; overflow: visible; }
</style>
<div id="head">页头</div>
<div id="mainbody">
<div id="left_bar">
<div id="left_child">左边孩子</div>
</div>
<div id="right_bar">
<div id="right_child">右边孩子</div>
</div>
</div>
<div  style="clear: both;"></div>
<div id="footer">页脚</div>
<div id="mask">这个是遮罩层，用于测试遮住各个地方的效果。</div>

</body>
</html>

大家先打开各个浏览器，ie6---大家可以装虚拟机来模拟。

看到效果后，将mainbody的样式加上一个position:relative,看看万恶的ie6下面会变成怎么样？

#mainbody{ width: 500px; overflow: visible;position:relative; }

好吧，各位假如已经知道结论了，就明白如何处理了。

ps：这个是一个真实的案例，是一个在用遮罩层遮住所有地方但是只剩下一个地方可以看见的需求下面出现的问题。只不过我抽象出一个demo出来了。其实反思一下，ie6的处理也是合情合理的，假如你父子点都有position了，可以使用z-index了，那么我是不是可以直接以父节点作为一个整体（而不是子节点有自己的z-index）来处理层级呢？---这可能是ie6的逻辑。