28172 sujets

CSS et mise en forme, CSS3

Z-index: auto dans IE

Bonjour,

Je rencontre un probleme avec IE 6 et 7. Apparament le z-index: auto n'est pas bien géré.
Un exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>z-index</title>
<style type="text/css">
#alphabet { position: relative; z-index: 1; }
#a,
#b,
#c,
#d,
#e,
#f { position: absolute; height: 300px; width: 300px; }
#aa, #ab,
#ba,
#ca,
#da,
#ea,
#fa { position: absolute; height: 100px; width: 100px; }
#a { left: 236px; background: #990000; z-index: auto; }
#aa { left: 189px; top: 20px; background: #CC6633; z-index: 50; }
#ab { left: 24px; top: 37px; background: #CC0000; z-index: 70; }
#b { background: #FF00FF; left: 1px; top: 9px; z-index: 2; }
#c { background: #00FFFF; left: 11px; top: 39px; z-index: 3; }
#d { background: #0000FF; left: 214px; top: 87px; z-index: 4; }
</style>
</head>

<body>
<div id="alphabet">
<div id="a">Placez ici le contenu de  id "a"
	<div id="aa">Placez ici le contenu de  id "aa"</div>
    <div id="ab">Placez ici le contenu de  id "ab"</div>
</div>
<div id="b">Placez ici le contenu de  id "b"</div>
<div id="c">Placez ici le contenu de  id "c"</div>
<div id="d">Placez ici le contenu de  id "d"</div>
</div>
</body>
</html>

Sous les IE #aa et #ab ne passent pas au dessus de la div bleue, contrairement à Fx.
Bonjour ilood et benvenue Smiley cligne ,

Je ne sais pas trop ce que tu essaye de faire mais je dirai que c'est normal que "a" ne passe pas au dessus.

Tu utilises des propriétés seulement activent pour certains type de positionnement (absolu et relatif) et toi tu ne déclares aucun de ces positionnements pour ton bloc.

En spécifiant un positionnement et un z-index suffisant "a" passe devant tous le restant.


#a
{
position:absolute; 
left: 236px; 
background: 
#990000; 
z-index: 5;
}

Modifié par knarf (09 Oct 2008 - 23:25)
Sujet clos
Aller à