ie6下z-index不起作用？

首先请明确，无论哪一个浏览器下面，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的逻辑。

ie6下z-index不起作用？相关推荐

IE6下z-index犯癫不起作用bug的初步研究
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=471 一.匆匆带过的 ...
IE6下div宽高设置
IE6下宽高设置.IE下div 中没有内容时,设置宽高不起作用,必须设置div背景色,并使用滤镜.才能使Div填充目标区域.多用于,其他容器元素使用背景图片,但是背景图片的部分需要其他的事件支持.如跳 ...
IE6下PNG图片透明效果(PNG图片做背景也可以)
懒人萱在这里保证发的文章都是高质量的经过测试的JS代码,而且IE6.IE7和火狐都兼容的,希望大家多多关注我的帖子,我会把我的经验都共享出来哦! 懒人萱在寻找PNG图片透明效果的JS特效代码的时候,发 ...
IE6下css常见bug处理
1.双倍边距如下图所示,一个样式里面既设定了"float:left:"又有"margin-left:100px:"的情况,就呈现了双倍情况.如外边距设置为10 ...
IE6下top.location.href失效的问题
IE6下top.location.href失效的问题一般是因为在触发此事件的按钮上的Onclick事件中没有加return false的原因,加上即可执行. <a href="jav ...
解决png图片在IE6下的透明问题
已经几天没更新博客了,也就是这几天学习上的进账收效甚微,原因是在准备毕业答辩的事,还有两天时间用在了跑去东莞面试,面试的结果很悲催呵呵.自己其实自我感觉还过得去吧,至少能工作,但就是自己还不够自信,在 ...
解决jquery.autocomplete在IE6下被下拉框遮住的问题
jquery.autocomplete是一个让人又爱又恨的东东,一直用得不错,可是用得越是深入就越是郁闷,这不,之前发现并解决了两个问题,这次又有问题找上我了.之前的两个问题分别是:<为jque ...
IE6下png背景不透明——张鑫旭博客读书笔记
从今天开始跟着大牛张鑫旭的步伐,每天进步一点点问题:IE6不支持png背景透明或半透明一.可解决的方法补充:css滤镜主要是用来实现图像的各种特殊效果.(了解) css滤镜的标识符是" ...
ie6下png阴影问题的解决方案
png在IE6下的解决办法默认分类 2010-08-23 23:58:12 阅读50 评论0 字号:大中小订阅 [转自:http://blog.csdn.net/newflypig/a ...
png在IE6下去除显示阴影的解决办法
png在IE6下的解决办法默认分类 2010-08-23 23:58:12 阅读50 评论0 字号:大中小订阅 [转自:http://blog.csdn.net/newflypig/a ...

ie6下z-index不起作用？

ie6下z-index不起作用？相关推荐

最新文章

热门文章