[Résolu] Positionner un div absolute sur un div relative : probleme IE

Bonjour,

je suis confronté à un petit probleme de positionnement sous IE7 (pas testé sous IE6).

J'ai deux calques relatifs l'un à la suite de l'autre, dans le premier j'ai un calque en "absolute" qui devrait se positionner au dessus de tous les autres mais sous ie7 il se retrouve sous le second calque relatif !!!!

voilà le css :

body{color:#fff}
	
#div1{
     position:relative;
     height:30px;
     background-color:red;
}

#div2{
     z-index:1;
     position:absolute;
     top:15px;
     left:100px;
     height:100px;
     width:50px;
     background-color:green;
}

#div3{
     position:relative;
     height:30px;
     background-color:blue;
}

et voilà l'html :

<div id="div1">
     calque relative 1
     <div id="div2">calque absolute</div>
</div>

<br/><br/>

<div id="div3">calque relative 2</div>

Et voilà un schéma résumant le tout :

Quelqu'un a t'il une idée ?
Merci
Modifié par Mr. Pink (19 Feb 2008 - 18:22)

Bonjour,

Si tu fais:

#div1 {
	z-index: 1;
}
#div2 {
	z-index: 3;
}
#div3 {
	z-index: 2;
}

#div2 sera affiché sous #div3, car #div2 est un enfant de div#1 sité plus bas que #div3 dans la pile. Il faut donc faire:

#div1 {
	z-index: 2;
}
#div3 {
	z-index: 1;
}

Bonjour Mr. Pink,

Peut-être en enlevant ton conteneur positionné en absolute du conteneur positionné en relative :

<div id="div1">calque relative 1</div>
<br/>
<div id="div2">calque absolute</div>
<br/>
<div id="div3">calque relative 2</div>

Cela fonctionne sous IE6 et 7.

Cdt,
Sylvain

*Grilled
Florent.
Je ne répond pas vraiment à la problématique de surccroit
Modifié par 6l20 (19 Feb 2008 - 18:14)

bonjour

enlève le "position:relative" de div#3

Merci pour vos réponses !

@Florent V. : impec ! Je n'y avais pas pensé mais cette solution marche au poil ! merci beaucoup !

@6l20: j'avais remarqué que ça fonctionnait en sortant le div absolute mais ça ne correspondait pas à ce que je voulais faire.

@verdan : j'ai aussi besoin du "position:relative" de div#3 pour la suite mais merci quand même