Internet explorer z-index auto

**ilood** · 07/10/2008, 15h07

Bonjour
J'aimerai d'abord savoir si IE 6,7 gère le z-index auto ?
Je rencontre de gros prroblème à cause du "contexte d'empilement".

Un exemple simple:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>z-index</title>
<style type="text/css">
#alphabet { position: relative; z-index: 1; }
#a,
#b,
#c,
#d,
#e,
#f { position: absolute; height: 300px; width: 300px; }
#aa, #ab,
#ba,
#ca,
#da,
#ea,
#fa { position: absolute; height: 100px; width: 100px; }
#a { left: 236px; background: #990000; z-index: auto; }
#aa { left: 189px; top: 20px; background: #CC6633; z-index: 50; }
#ab { left: 24px; top: 37px; background: #CC0000; z-index: 70; }
#b { background: #FF00FF; left: 1px; top: 9px; z-index: 2; }
#c { background: #00FFFF; left: 11px; top: 39px; z-index: 3; }
#d { background: #0000FF; left: 214px; top: 87px; z-index: 4; }
</style>
</head>
 
<body>
<div id="alphabet">
<div id="a">Placez ici le contenu de  id "a"
	<div id="aa">Placez ici le contenu de  id "aa"</div>
    <div id="ab">Placez ici le contenu de  id "ab"</div>
</div>
<div id="b">Placez ici le contenu de  id "b"</div>
<div id="c">Placez ici le contenu de  id "c"</div>
<div id="d">Placez ici le contenu de  id "d"</div>
</div>
</body>
</html>

Sous Firefox, #aa et #ab passent au dessus de tous les blocs.
Sous IE 6, 7 #aa et #ab ne passent pas au dessus de ces blocs.

Connaissez-vous un moyen d'obtenir le même résultat sur ces 3 navigateurs ?

Merci

**Bovino** · 07/10/2008, 20h04

Sous IE, il faut positionner les éléments pour que le z-index ait un effet.

**ilood** · 07/10/2008, 23h36

Envoyé par Bovino

Sous IE, il faut positionner les éléments pour que le z-index ait un effet.

Il me semble que les éléments sont positionnés ? Non ?

Code :

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

1
2
3
#alphabet { position: relative; z-index: 1; }
#a, #b, #c, #d, #e, #f { position: absolute; .... }
#aa, #ab, #ba, #ca, #da, #ea, #fa { position: absolute; ...}