CSS Z-index and IE6, IE7

A problem as old as IE6 and IE7 themselves, but somehow, while fixing someone else's code, I stepped on this rake. I stared and puzzled until I realised it was an IE 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;
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 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;
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