28172 sujets

CSS et mise en forme, CSS3

CSS / chevauchement bloc relatif

Salut à tous.

Deja, je fais un voeu, c'est mon premier post ici.

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 :

a écrit :

<!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>
<!-- debut header -->
<div style="height:100px;position:relative;border:1px solid black">
<!-- debut pub -->
<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>
<!-- fin pub -->
</div>
<!-- fin header -->
<!-- debut content -->
<div>
Du texte
<!-- debut bloc relative -->
<div style="background:red;z-index:2;position:relative">fdgfdgfdgfd</div>
<!-- fin bloc relative -->
encore du texte
</div>
<!-- fin content -->

</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.
Déjà il serait beaucoup mieux que ton css soit placer dans un fichier externe ca permettra déjà te d'y retrouver Smiley smile

Après je ne comprend pas pourquoi tu as placer les div en position relative, qu'elle est l'importance?
Salut et merci pour ta reponse

C'est un exemple simplifié pour illustrer mon problème. En gros, j'ai une campagne pub actuellement en expand banner qui passer derriere tous les elements "relative" qui la suivent. Cet exemple est censé l'illustré, pour essayer de trouver la meilleure façon de contourner le probleme.

Le mieux, c'est l'exemple Mozilla :
https://developer.mozilla.org/fr/Comprendre_le_z-index_en_CSS/Exemple_d%27empilement_1

Ca ne fonctionne pas sous IE, c'est fou quand même.
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é.
Modifié par krucial (19 Feb 2009 - 14:31)
Ok bon bah si c'est résolu un petit résolu dans le titre de ton sujet serait le bienvenue Smiley cligne

Bonne continuation
Sujet clos
Aller à