parent zIndex problem IE6 and IE7
For my understand. I need to put div 2 in front of div 3. How can I do this in IE6 and IE7. All of others browsers works normal. Here is my code.
CSS
div {
position:absolute;
}
#div1 {
background:#0F9;
top:0;
left:0;
width:500px;
height:400px;
}
#div2 {
background:#C00;
top:20px;
left:280px;
开发者_StackOverflow社区 width:100px;
height:100px;
z-index:3;
}
#div3 {
background:#006;
top:10px;
left:10px;
width:300px;
height:200px;
z-index:2;
}
Código
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
I have tested the following in IE6/7/8, Chrome, and Firefox. This puts #two in between #one and #three
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>
CSS:
#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;
}
In Action: http://www.webdevout.net/test?02C
See Internet Explorer z-index bug?.
You need to explicitly set the z-index for your "#div1". Simply set #div1 { z-index: 0; } and your problem is solved.
http://www.webdevout.net/test?01c
As far as I know, there is no known solution for this problem, since the #div1 gets automatically a "z-index:0" in IE7, which prevents the #div2 from overlapping #div3.
To make FF and Chrome behave more like IE7, add "z-index:0" to all elements with no "z-index" specified. This will not solve your problem, but might facilitate testing.
加载中,请稍侯......
精彩评论