Background et z-index

**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.

Background et z-index

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager