IE, z-index et position:relative/absolute

Bonjour les gens ;)

J'ai mon div #cinq (relative) qui se met au dessus de mon div #quatre (absolute) sous IE, malgré le z-index.

Code:

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
<style type="text/css">
div {
    padding:1em;
    margin:1em;
}
#un {
    border:1px solid blue;
    background: #CCF;
}
#deux {
    border:1px solid red;
    background: #FCC;
}
#trois {
    border:1px solid green;
    background: #CFC;
    position:relative;
}
#quatre {
    border:1px solid orange;
    background: #FFC;
    position:absolute;
    top:0px;
    left:5em;
    height:20em;
    z-index: 200;
}
#cinq {
    border:1px solid purple;
    background:#FFEFFF;
    position:relative;
    z-index: 20;
}
</style>
<div id="un">un
    <div id="deux">deux
        <div id="trois">trois
            <div id="quatre">quatre</div>
        </div>
    </div>
    <div id="cinq">cinq</div>
</div>

Sous IE:
http://img94.imageshack.us/img94/3364/screenshot10r.png

Sous Firefox/Chrome:
http://img9.imageshack.us/img9/8621/screenshot11yf.png

Quelle est la cause du problème ? Comment corriger celà ?

Merki :)

apparemment, c'est un bug IE7

met aussi ton z-index: 200 sur le div #trois et ça devrait fonctionner.

Voici le lien qui m'a aidé
http://www.coolcoyote.net/category/i...tion-css-xhtml
;)

ça marche !!! Thanks!