Z-index et position:relative

Bonjour,

Comment faire pour qu'un élément positionné en absolute dans un conteneur poisitionné en relatif passe au dessus d'un autre élément positionné en absolute ?

Je connais la réponse : il faut indiquer un z-index pour chacun de ces éléments.

D'accord, mais pourquoi ça ne fonctionne pas avec IE ?

Le code :

<div style="position:relative;">	
	<ul style="background-color:red; width:100px; height:100px;position:absolute;top:10px; left:10px;z-index:2;"
		<li>test</li>
		<li>test</li>
		<li>test</li>
	</ul>
	</div>
<div style="position:relative;">
	<ul style="background-color:yellow; width:100px; height:100px;position:absolute;top:30px; left:30px;z-index:1;"
		<li>test</li>
		<li>test</li>
		<li>test</li>
	</ul>
	</div>

Vous pouvez changer la valeur du z-index, le div jaune est toujours devant. Est-ce qu'il existe un moyen de corriger ce bug ?

Merci pour vos réponses.
Modifié par EricLB (09 Oct 2006 - 14:27)

Hello,

L'empilement des éléments ne fonctionne que s'ils sont frères (sauf exception des positions absolues qui sortent du flux)
Or ici, tes listes <ul> appartiennent à des parents <div> différents.
Modifié par Raphael (09 Oct 2006 - 14:45)

Hello,

C'est dans les specs ? Si tu as de la lecture là-dessus, je suis preneur.

De mon côté j'ai trouvé ça : Effect of z-index value to RP and AP blocks. Très instructif !

J'ai solutionné mon problème, en mettant le z-index sur les élèments en "position:relative", sur l'exemple que j'ai donné c'est simple. Dans ma page véritable le premier div (parent) est en "z-index:1" le deuxième div (enfant) est en "z-index:2;". ça veut dire que ça marche même avec deux éléments qui ne sont pas frères.

Quand tu dis :

Raphael a écrit :

L'empilement des éléments ne fonctionne que s'ils sont frères (sauf exception des positions absolues qui sortent du flux)
Or ici, tes listes <ul> appartiennent à des parents <div> différents.

Dans mon exemple précédent les 2 éléments "ul" sont en positionnement absolus et sortent donc du flux. Si je suis ton raisonnement ça devrait marcher. Et effectivement ça marche dans tous les navigateurs sauf Internet Explorer. D'après ce que j'ai lu à droite et à gauche, il s'agit véritablement d'un bug d'IE.

Le pire c'est que la version RC1 d'IE7 a conservé ce bug...

Bonjour,

Très rapidement, et sans avoir regardé en détail: il y a quelques chances que ce soit le bon vieux grand bug du référent au positionnement dans IE.
- navigateurs conformes: e positionnement absolu a pour référence le plus proche parent positionné en relatif
- IE Windows: le positionnement absolu a pour référent le plus proche parent positionné en relatif doté de haslayout

Il suffit qu'un des éléments pris comme référent lors des essais ci-dessus ait été dimensionné, par exemple, pour qu'il ait eu le haslayout, et qu'IE se soit bien comporté. Ou qu'il n'ait pas été dimensionné, et que ça se casse la binette...

Je ne pense pas que ce soit ce bug, dans le cas présent, il s'agit du z-index qui ne s'applique pas aux éléments absolus positionnés dans des conteneurs distincts positionnés en relatif dans IE.
Modifié par EricLB (10 Oct 2006 - 10:54)

bonjour,

le positionnement relatif dans IE est parfois assez "etonnant" quant au resultat/effets.

debordement sans scroll-bar , activation du layout (oui/non/partielle parfois),
Il faut surtout bien comprendre que le conteneur en relatif devient bien la reference pour ses enfants enfants (et qu'il aurait tendance a forcé le "layout" dans IE avec des resultats plus ou moins heureux), entre autre et principalement pour le positionnement (coordonnées), mais aussi le z-index , qui est aussi une valeur de positionnement(dessus/dessous).
Un "enfant" en prenant le parent en relatif comme reference , herite de ses valeurs proprietés de positionnement (coordonnées/dessus/dessous) .
Dans le conteneur le flux reprend son cours normal , sans interagir avec l'exterieur , si ce n'est l'espace que vient a occupé le parent.

Le z-index des enfants sera donc la valeur du parent pour tout les elements exterieurs a celui-ci .

Les valeurs de z-index attribué aux enfants n'auront d'effets que dans le parent prit comme reference , cela semble valoir aussi dans les autres navigateurs .

code exemple ou IE6 et FF ont le même comportement:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 Transitional</title>
<style type='text/css'>
div {
border:1px solid #eee;
position:relative;
top:-1em;
background:#ff4;
z-index:0;}
.un {
top:2em;
background:#f4f;position:relative;z-index:0}
div p {z-index:2;background:pink;}
zoom:1;</style>
</head>
<body>
<div class="un">	 
<p>Zone ou section</p>
</div>
<div>	
<p> Zone ou section</p>
</div>
<div> Zone ou section</div>
</body>
</html>

Maintenant le defaut de IE (que j'ai remarqué) est de "redessiner" les elements qui se precedent dans le flux (du code) au dessus .
et en conferant/activant ce "layout" ?! , effet pervers du "position:relative;" qui du coup semble zapper les z-index entre chacun des elements positionné en relatif en forçant leur affichage en avant plan mais au même niveau et en donnant la priorité aux premiers !?.

Je n'ai toujours pas bien compris cette histoire de layout et le position:relative; , car j'ai remarqué a plusieurs reprise que ce position:relative; (sans dimension) , revélé une balise qui avait un defaut d'affichage .(enfin pas toujours car quand 2 balises block qui se suivent et qu'elles ont ce "defaut de layout" , le position :relative; affiche bien la premiere balise , mais la seconde reste parfois invisible , ... gné ! ).

En faisant usage de la devtoolbar et du dom explorer de IE , on s'aperçoit bien qu'un positionnement en relatif ne confere pas le layout la ou il manque ... !? , zoom ou width/height , oui , bien sur

Y'a surement un truc tout bête qui m'echappe a propos d'IE , le positionement relatif et ce sacré "layout" ....

bonsoir