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; ...}

**HiRoN** · 08/10/2008, 12h33

Il parlait peut-être des propriétés : top, left, right, bottom...

**ilood** · 08/10/2008, 15h28

Envoyé par HiRoN

Il parlait peut-être des propriétés : top, left, right, bottom...

Elles sont là...
Ou... je rêve ?

**devyan** · 12/11/2008, 12h52

J'ai déjà rencontré un problème similaire il me semble...

Si je me souviens bien il semblerait que le z-index en question "reste relatif au parent" avec IE. Et donc il n'est pas possible de placer un élément "enfant" d'un "frère" par dessus un élément "auto" placé après. (dans ton cas aa et ab ne passent donc jamais devant b, c et d)

Internet explorer z-index auto

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager