nicht angemeldet
Hallo css-Experten:
Ist z-index in Verbindung mit einem Gemisch aus position: absolute und position: relative erlaubt?
Folgendes Problem:
In einem recht komplexem Layout (Beispielscode stark verkürzt) soll ein Container "outOfTheBox" über dem main-Container stehen. Da dessen z-index höher ist, erwarte ich eigentlich, dass dieser das auch tut. Statt dessen liegt aber der main-Container vorne (Mozilla 1.0.7, Safari 1.3, IE5.5, IE6). Wenn ich im main-Container die position herausnehme (was ich leider wegen hier nicht ersichtlicher Abhängigkeiten nicht kann), geht es lustigerweise, obwohl dann main nicht positioniert ist.
Kann mir jemand das Verhalten erklären?
Kann mir jemand helfen, outOfTheBox über main zu lagern, ohne an der Positionierung von main zu basteln?
Vielen Dank für alle Hilfe, die da kommen mag,
Gruß Andree
Der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<style type="text/css">
~~~~~~css
* {
margin: 0;
padding: 0
}
#subNavi li {
background: #F99;
position: relative; /* for outOftheBox */
z-index: 10;
}
#outOfTheBox {
background: #987;
font-size: 300%;
left: 5em;
position: absolute;
top: 0;
z-index: 100;
}
#main {
background: #3C3;
position: relative; /* for outOftheBox */
z-index: 20;
}
~~~~~~html
</style>
</head>
<body>
<ul id="subNavi">
<li>
subNavi.li
<div id="outOfTheBox">outOftheBox</div>
</li>
</ul>
<div id="main">main</div>
</body>
</html>
MudGuard