Background et z-index [Résolu]

guillaumeabxl · 01/05/2011, 23h00

Bonjour,

J'ai un petit problème d'ordre dans mes div. Je voudrais placer une div avec une image de background au dessus d'une autre div qui contient un slideshow.

voici mes css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body { background-color: #000; margin: 0px 0px 0px 0px; }
.slideshow { height: 470px; width: 550px; z-index:1; }
.container { height: 470px; width: 960px; background-image:url(img/bg.jpg); margin: auto; }
.jungle { height: 470px; width: 960px; background-image:url(img/bg_jungle.png); z-index:5; }

et ici mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body>
	<div class="container"><div class="jungle">
    <div class="slideshow">
		<img src="img/home_slide1.png" width="550" height="470" />
		<img src="img/home_slide2.png" width="550" height="470" />
    	<img src="img/home_slide3.png" width="550" height="470" /></div></div></div>
 
</body>

J'ai utiliser z-index pour que le contenu de "jungle" soit au dessus de "slideshow" mais il n'en ai rien.

Je crois que ça vient de la déclaration de mon image en background de ma div "jungle".

Quand dite vous ?
Merci pour vos réponses.

Bisûnûrs · 02/05/2011, 09h41

C'est impossible que le fond d'un div se trouve au-dessus du contenu d'un de ses éléments descendants. Ils faut que ton div "jungle" soit frère de ton div "slidehow" pour que cela fonctionne.

guillaumeabxl · 02/05/2011, 10h54

Alors je devrais écrire cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body>
	<div class="container">
    <div class="slideshow">
		<img src="img/home_slide1.png" width="550" height="470" />
		<img src="img/home_slide2.png" width="550" height="470" />
    	        <img src="img/home_slide3.png" width="550" height="470" /></div><div class="jungle"></div></div>
</body>

Mais du coup le contenu de "jungle" s'affiche en dehors du container.

Bisûnûrs · 02/05/2011, 11h12

Il faut positionner ensuite ton div jungle en position:absolute en top:0 et en left:0 en prenant soin de ne pas oublier de mettre un position:relative sur le container.

guillaumeabxl · 02/05/2011, 17h03

parfait, merci pour tes réponses.

02/05/2011, 09h41	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	C'est impossible que le fond d'un div se trouve au-dessus du contenu d'un de ses éléments descendants. Ils faut que ton div "jungle" soit frère de ton div "slidehow" pour que cela fonctionne.
	00

02/05/2011, 11h12	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Il faut positionner ensuite ton div jungle en position:absolute en top:0 et en left:0 en prenant soin de ne pas oublier de mettre un position:relative sur le container.
	00

02/05/2011, 17h03	#5
guillaumeabxl Nouveau Membre du Club Inscription : octobre 2007 Messages : 119 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 119 Points : 39 Points : 39	parfait, merci pour tes réponses.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email