Html 父zIndex问题IE6和IE7
为了我的理解。我需要把第二组放在第三组前面。如何在IE6和IE7中实现这一点。其他所有浏览器都正常工作。这是我的密码Html 父zIndex问题IE6和IE7,html,parent,internet-explorer-6,internet-explorer-7,z-index,Html,Parent,Internet Explorer 6,Internet Explorer 7,Z Index,为了我的理解。我需要把第二组放在第三组前面。如何在IE6和IE7中实现这一点。其他所有浏览器都正常工作。这是我的密码 CSS 科迪戈 <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div> 请参阅 您需要为“#div1”显式设置z索引。只需设置#div1{z-index:0；}，您的问题就解决了 请参见 您需要为“#div1”显式设
CSS 科迪戈
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
#div1z索引。只需设置#div1{z-index:0；}
，您的问题就解决了
请参见
您需要为“#div1
”显式设置z索引。只需设置#div1{z-index:0；}
，您的问题就解决了
我在IE6/7/8、Chrome和Firefox中测试了以下内容。这将两个
置于一个<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="content">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
</body>
</html>
实际操作：我已经在IE6/7/8、Chrome和Firefox中测试了以下内容。这将两个置于一个和三个之间 HTML:
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="content">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
</body>
</html>
在实际操作中：据我所知，这个问题没有已知的解决方案，因为在IE7中#div1会自动获得一个“z-index:0”，这可以防止#div2与#div3重叠
要使FF和Chrome的行为更像IE7，请在未指定“z索引”的所有元素中添加“z索引：0”。这不会解决您的问题，但可能有助于测试。据我所知，这个问题没有已知的解决方案，因为在IE7中#div1会自动获得一个“z-index:0”，从而防止#div2与#div3重叠
要使FF和Chrome的行为更像IE7，请在未指定“z索引”的所有元素中添加“z索引：0”。这不会解决您的问题，但可能有助于测试。这两个答案对我没有帮助。我需要把div3放在div1和div2之间。这些答案。一个将div1放在div3前面，另一个复制div，我不能这样做。有人能帮我吗？如果我显式地将div改为z-index:0，div3将在div2前面。此解决方案无效。最佳解决方案是使用flash！：-/这两个答案对我没有帮助。我需要把div3放在div1和div2之间。这些答案。一个将div1放在div3前面，另一个复制div，我不能这样做。有人能帮我吗？如果我显式地将div改为z-index:0，div3将在div2前面。此解决方案无效。最佳解决方案是使用flash！：-/但是这样你改变了html，而我不能改变。你有其他的解决方案吗？但是用这种方法你改变了html，我不能改变。你有其他的解决方案吗？这并不完全正确：在IE7中，任何没有显式zIndex的元素都被视为“自然进程”渲染，因此隐式zIndex堆栈会随着页面向下移动而增加。具有显式“position”属性的元素创建新的堆叠上下文（在已应用的隐式上下文中），因此仅影响其各自的子元素。这就是为什么IE（高达8）中的z索引关系天生就被破坏的原因！因此，在Webkit/Gecko引擎中复制这种行为也将比您暗示的要复杂得多！这并不完全正确：在IE7中，任何没有显式zIndex的元素都被视为“自然进程”呈现，因此隐式zIndex堆栈随着页面向下移动而增加。具有显式“position”属性的元素创建新的堆叠上下文（在已应用的隐式上下文中），因此仅影响其各自的子元素。这就是为什么IE（高达8）中的z索引关系天生就被破坏的原因！因此，在Webkit/Gecko引擎中复制这种行为也将比您暗示的要复杂得多！
#one{
background-color: #f1f1f1;
position: absolute;
left:105px;
top:155px;
z-index: 0;
}
#two{
background-color: #c9c9c9;
position: absolute;
left:100px;
top:145px;
z-index: 1;
}
#three{
background-color: #888888;
color: #f1f1f1;
position: absolute;
left:95px;
top:135px;
z-index: 2;
}