z-index的一个非常重要的细节
来源：互联网 发布：网络视频监控系统方案 编辑：程序博客网 时间：2024/06/10 08:17
JavaScript教程网今天跟大家讨论一个z-index的问题，z-index的一个非常重要的细节，首先请明确，无论哪一个浏览器下面，z-index的元素要带有position（relative,fixed,absolute）才能起作用。
明确以后看看这个文章：
在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的逻辑。
来源：z-index的一个非常重要的细节
- z-index的一个非常重要的细节
- IE7下z-index的一个bug
- 一个css中z-index的用法
- 一个css中z-index的用法
- z-index 的用法
- z-index的应用
- 鲜为人知的z-index
- 鲜为人知的z-index
- z-index的使用
- z-index的兼容性问题
- z-index的属性
- z-index的作用
- z-index的用法
- z-index的用法
- 一个非常重要的测试问题
- IE6 z-index的bug
- IE6的 z-index BUG
- CSS 的 z-index 属性
- 在 cocos2d-x 3.0 中中文显示为乱码的问题
- hdu 2059（龟兔赛跑 dp）
- hdoj 1429 胜利大逃亡(续) 【BFS+状态压缩】
- HDU 3395 Special Fish
- 二、Java类和对象
- z-index的一个非常重要的细节
- 迅雷IOS面试总结
- activeMQ无法启动
- QlikView图表显示同比数据
- ARC属性中还能使用assign，copy，retain这些关键字吗？
- excel工作表密码破解方法
- 关于用jquery attr方法获取checkbox复选框得到的值一直是underfine的原因
- JSON入门之二：org.json的基本用法
- 动态规划 之 背包系列
