Z-index ne fonctionnant pas

**helkøwsky** · 29/10/2012, 12h46

Bonjour à tous/toutes,

voilà j'ai un soucis avec mon code html, je voudrais faire passer une balise img derrière un background d'une div. j'ai essayé de changer les position en absolute mais rien n'y fait si vous avez une idée je suis preneur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
					<div class="images_menu_2">
						<div class="texte_image">
							<span class="text_medium">eclair</span>
						</div>
						<div class="menubdd_image_2" >
							<img id=image_sousmenu0 src="rouge.jpg" alt="" title="" />
						</div>
						<div class="img_prod_bot">
							<div class="contenu_info_img">
								<div class="image_prix">
									<span class="text_lower">Prix : </span>
									<span class="text_lower2">3.95 Chf</span>
								</div>
								<div class="image_qty">						
									<span class="text_lower">Qty :</span>
									<input type="text" name="1" size="1" maxlength="2">
								</div>
							</div>
							<div class="panier_image_contenu">
								<a class="panier_image_contenu_hover" href="#">
									<input type="image" id="img_panier_0" src="image/permanente/image_contenu_panier2.png" />
								</a>
							</div>
						</div>
					</div>
  <style type="text/css">
.images_menu_2/* les images dans les conteneur sans marge pour la première*/
{
	font-family: Comic Sans MS, Arial, Verdana, serif;	
	font-size: 1em;
	margin-right: 5px;
	color: #3f3f3f;
	float: left;
	width: 180px;
	height: 215px;
	margin-top: 5px;
	background-color: blue;
	z-index: 100;
}
.texte_image 
{
	float:left;
	width: 100%;
	height: 25px;
	width: 180px;
	text-align: center;
}
.menubdd_image_2
{
	float:left;
	margin-left: 2px;
	float: left;
	width: 176px;
	height: 138px;
}
.menubdd_image_2 img
{
	width:100%;
	height:100%;
	z-index: 10;
}
.img_prod_bot
{
	float: left;
	margin-left: 8px;
}
.contenu_info_img
{
	float:left;
	width: 100px;
}
.image_prix
{
	float: left;
	height:23px;
}
.text_lower
{
	color: black;
	font-size: 0.8em;
}
.text_lower2
{
	color: black;
	font-size: 0.7em;
}
.panier_image_contenu
{
	margin-top: 10px;
	margin-left: 10px;
	float:left;
}
  </style>

j'ai mis les z-index aux lignes : 38 et 60.

D'avance merci aux personnes qui prendront le temps de jeter un oeil.

**dragonfly** · 30/10/2012, 11h26

Bonjour, c'est normal

La div 'menubdd_image_2' se trouve dans ta div 'images_menu_2' .
Il faut que la div 'menubdd_image_2' ne soit pas contenu dans la div 'images_menu_2' mais qu'elle soit au même niveau.

En fait, toute div contenue dans un autre ne peut pas se retrouver couverte par cette derniére.
Il te faudrait un code du genre :

Code :

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

1
2
3
4
5
6
7
 
<div class="images_menu_2">
...
</div>
<div class="menubdd_image_2" >
...
</div>

Ou tu créé une autre div avec les mêmes dimensions position que tu div 'images_menu_2' qui sera au même niveau que celle-ci est qui recouvrera ton image.

En esperant avoir été clair.
Dragonfly