Odd problem with IE8 and z-index CSS property
I not been able to put one DIV over his parent DIV in Internet Explorer. With Firefox is working as suposed to.
The odd part is that if I open the html file directly in IE, everything works fine. But if I upload to the server and open from there, the div is hidden underneath his parent.
I've tried several z-index combinations and none works.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/开发者_如何学运维xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<style type="text/css">
.col { float:left; width:310px; margin-right:13px; }
.art { position:relative; border-bottom: 1px solid #d0d0d0; font: normal normal bold 11px Arial,Verdana,Helvetica; color:#A0A0A0; width:310px; height:50px; top:0px; left: 0px; margin-right:10px; background-color:#F0F0F0; }
.art a { padding:3px; display:block; width:304px; height:100%; color:#707070; }
.art a:visited { color:#A0A0A0; }
.art a:hover { background-color:#E0E0E0; }
.box { z-index:1000; background-color:#A0A0A0; color:#404040; font: normal normal bold 11px Arial,Verdana,Helvetica; display:none; position:absolute; top:30px; left:10px; text-align:left; border:3px solid #707070; margin:5px 0px 5px 5px; font-size:10px; color:White; width:100%; }
</style>
<script type="text/javascript">
function sh(obj)
{
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) {
el.style.display = 'block';
}
else
{
el.style.display = 'none';
}
}
</script>
</head>
<body>
<div class="col">
<div class="art">
<a href="" target="_blank" onmouseover="javascript:sh('i0')" onmouseout="javascript:sh('i0')">Title 1</a>
<div id="i0" class="box">
<div class="text">
Les "chemises rouges" manifestent depuis la mi-mars pour faire tomber le gouvernement et occupent depuis trois semaines un quartier touristique et commerçant autour duquel ils ont érigé des barricades.
</div>
</div>
</div>
<div class="art">
<a href="" target="_blank" onmouseover="javascript:sh('i1')" onmouseout="javascript:sh('i1')">Title2</a>
<div id="i1" class="box">
<div class="text">
Une association ardéchoise accueillant des séminaires de "bien-être" et de "développement personnel" a refusé d'accueillir un stage de danse en invoquant l'homosexualité des participants, ont indiqué aujourd'hui les organisateurs.
</div>
</div>
</div>
</div>
</body>
</html>
What's is going on here?
I think different stacking contexts are in play here. Z-index and positioning can be tricky:
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
加载中,请稍侯......
精彩评论