salut tout le monde,

j'ai un probleme avec les z-index que j'ai pas reussi à le resoudre

je veux positionner ma div qui est en jaune et en position absolute entre "li" et "li a img".

voici mon simple code:

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
*{
	margin:0px;
	padding:0px;
	border:none;
	z-index:0;
	}
body{
	background-color:#333;
	}
#droite{
	position:absolute;
	background-color: white;
	width:115px;
	height:372px;
	right:0px;
	overflow:hidden;
	}
#droite ul{
	position:relative;
	width:115px;
	margin:0px;
	padding:0px;
	list-style-type:none;
	border-left:2px solid white;
	z-index:1000;
	}
li{
	position:relative;
	width:115px;;
	height:87px;
	background-color:grey;
	margin-bottom:2px;
	padding-top:4px;
	padding-left:-10px;
	padding-right:10px;
 
 
	}
li a{
	position:relative;
	display:block;
	width:87%;
	height:80px;
	border:2px solid black;
	margin:auto;	
	}
li a img{
	position:absolute;
	width:100%;
	height:80px; 
	}
 
#globale{
	position:relative;
	width:600px;
	height:372px;
	background-color:#0C0;
	margin:50px auto;
	border:2px solid white;
	}
 
#animation{
	background-color:rgba(204,255,51,0.8);
	width:150px;
	height:87px;
	position:absolute;
	right:0px;
	top:0px;
	z-index:998;
	}
#image{
	position:relative;
	float:left;
	width:484px;
	height:372px;
	}
 
#image img{
	position:relative;
	width:100%;
	height:100%;
	}
</style>
</head>
 
<body>
<div id="globale">
	<div id="image"><img src="images/1.jpg" rel="Ici se trouve la description de la première photo"/></div>
	<div id="droite">
		<ul>
			<li><a href="#"><img src="images/1.jpg" rel="Ici se trouve la description de la première photo"/></a>
			<li><a href="#"><img src="images/2.jpg" rel="Ici se trouve la description de la 2eme photo"/></a>
			<li><a href="#"><img src="images/3.jpg" rel="Ici se trouve la description de la 3eme photo"/></a>
			<li><a href="#"><img src="images/4.jpg" rel="Ici se trouve la description de la 4eme photo"/></a>
			<li><a href="#"><img src="images/5.jpg" rel="Ici se trouve la description de la 5eme photo"/></a>
			<li><a href="#"><img src="images/6.jpg" rel="Ici se trouve la description de la 6eme photo"/></a>
			<li><a href="#"><img src="images/7.jpg" rel="Ici se trouve la description de la 7eme photo"/></a>
			<li><a href="#"><img src="images/8.jpg" rel="Ici se trouve la description de la 8eme photo"/></a>
			<li><a href="#"><img src="images/9.jpg" rel="Ici se trouve la description de la dernière photo"/></a>
		</ul>
	</div>
	<div id="animation"></div>
</div>
</body>
</html>
merci d'avance