Background et z-index

Version imprimable

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:

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:

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.

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

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.

Alors je devrais écrire cela :

Code:

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.

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

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.
02/05/2011, 17h03
guillaumeabxl

parfait, merci pour tes réponses.