CSS Z-index and IE6, 7

The problem is as old as the old IE6 and IE7, but checking code made by others, managed to step on the rake. So I looked at the code and wondered, until I realized that it is the IE bugs.

CSS:

#bg_1 {
position: relative;
width: 100px; height: 100px;
background: blue;
}

#bg_2 {
position: relative;
width: 100px; height: 100px;
background: green;
}

#front_1 {
position: absolute;
width: 100px; height: 100px; left: 50px; top: 50px;
background: red;
}

HTML:

<div id="bg_1">
<div id="front_1"> Some text </div>
</div>
<div id="bg_2"></div>

IE6	FF 3.6

IE 6.7 BUG

CSS:

#bg_1 {
position: relative;
width: 100px; height: 100px;
background: blue;
}

#bg_2 {
position: relative;
width: 100px; height: 100px;
background: green;
}

#front_1 {
position: absolute;
z-index: 9;
width: 100px; height: 100px; left: 50px; top: 50px;
background: red;
}

IE6	FF 3.6

Solution

CSS:

#bg_1 {
position: relative;
width: 100px; height: 100px;
background: blue;
z-index: 9;
}

#bg_2 {
position: relative;
width: 100px; height: 100px;
background: green;
}

#front_1 {
position: absolute;
z-index: 9;
width: 100px; height: 100px; left: 50px; top: 50px;
background: red;
}

IE6	FF 3.6

[1] IE z-index bug - http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html