CSS / Chevauchement de bloc

krucial2 · 19 Février 2009

Salut à tous.

Je rencontre un probleme de CSS avec IE et je le poste ici pour trouver quelqu'un pour m'aider.

Voici un code d'exemple :

<!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" xml:lang="fr" lang="fr">
<head>
<title>Page test</title>
</head>
<body>

<div style="height:100px;position:relative;border:1px solid black">

<div style="height:50px;background:black;z-index:5;position:absolute;top:0px;left:25px;">
<img src="http://www.forumconstruire.com/img/pubs/autopromo/300x250/isolation.gif" />
</div>

</div>


<div>
Du texte

<div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div>

encore du texte
</div>


</body>
</html>

C'est assez simple : un premier bloc de 100px de haut qui accueille un second bloc de 50px contenant une pub. Cette pub est plus grande que le bloc (300px de haut) ce qui arrive dans le cas d'extend banner.

Ensuite, en dessous, un bloc texte classique, contenant un autre bloc, placé en "relative" cette fois.

FF / Safari : nickel
IE : le bloc en relative passe par dessus ma pub, quoi que je fasse (z-index, etc)

Voir le resultat ici : http://www.forumconstruire.com/home/aeff.php

Avez-vous une solution à m'offrir ? Avez vous deja rencontré ce probleme ? Relou là !

Merci à tous.

krucial2 · 19 Février 2009

Par exemple, ceci https://developer.mozilla.org/fr/Comprendre_le_z-index_en_CSS/Exemple_ ... pilement_1 ne fonctionne pas sous IE : http://www.forumconstruire.com/home/aeff3.php

krucial2 · 19 Février 2009

Résolu, et c'est enorme. Si le bloc B dans le bloc A est en z-index 1000, et que le bloc A est en z-index 10, B sera en Z-index 10 sur IE.

Il faut donc que le bloc "pere" soit aussi en z-index elevé.

YoyoS · 19 Février 2009

Ce qui est logique quelque part. Faut voir ça comme des poupées russes ou des paliers. Le palier parent annulant tous les effets de l'enfant par rapport à d'autres parents du même palier.