0
J'ai une mise en page basée sur le positionnement absolu et un menu basé sur CSS dans la zone d'en-tête. Tout fonctionne bien dans Firefox, mais dans Internet Explorer 7 et 8, les menus déroulants sont couverts par la zone de contenu. IE n'honore tout simplement pas la propriété z-index dans ce cas.Position d'affichage IE7/8: éléments relatifs en face de la position: absolus?
J'ai lu sur les contextes d'empilement et le z-index bug, mais ne pouvait toujours pas le faire fonctionner. Y at-il un moyen de le réparer sans laisser tomber le position:absolute sur #content? Cependant, je peux changer la méthode de positionnement utilisée pour la zone de navigation.
Voici le code simplifié:
<!DOCTYPE html>
<html>
<head>
<style>
#nav {margin:0; padding: 0; position: absolute; left: 0; top: 0; right: 0; height: 2em; background: #eee}
#nav > li {float: left; list-style: none; position: relative; }
#nav > li > a {display: block; position: relative; margin: 0; background-color: #eee; padding: 5px; border: 1px solid #eee; text-decoration: none; color: #444;}
#nav > li:hover > a { background-color: #ddd; }
#nav li ul { z-index: 1; display: none; position: absolute; padding: 0; margin: 0; list-style: none; border: 1px solid black; background: #eee; width: 100px; }
#nav li:hover ul {display: inline;}
#nav li ul li {list-style: none; margin: 0; padding: 0; height: 5em; }
#nav li ul li a {display: block; padding: 5px; margin: 0; color: #444; text-decoration: none; white-space: nowrap;}
#content { position: absolute; top: 3em; left: 0; right: 0; bottom: 0; background: #ccc; }
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">A</a><ul><li>...</li></ul></li>
<li><a href="#">Group B</a><ul><li>...</li></ul></li>
<li><a href="#">The third group</a><ul><li>...</li></ul></li>
</ul>
<div id="content"></div>
</body>
</html>