Today I came across another IE positioning bug:
When you have two div-elements (one above the other), both with relative positioning, and you add another block element inside the first div, this time with absolute positioning, then the latter might appear underneath the second div when its height exceeds the height of the containing div, no matter what z-index you use.

An example will make this more clear:

position: absolute / height: 60px / top: 40px

position: relative / height: 60px

position: relative / height: 60px

You should see clearly see a difference between IE6/7 and let’s say Firefox. The problem with IE is that it stacks elements with a relative position, ignoring the z-indexes applied to elements within.

Luckily there’s a way to solve it:

position: absolute / height: 60px / top: 40px

position: relative / height: 60px

position: relative / height: 60px

All you’ve got to do is add z-indexes to both relative positioned elements, in reverse order. In this example, I gave a z-index 2 to the first div, and a z-index 1 to the second div. This makes sure that IE will stack the first div on top of the second one.

The css might look something like this:


#div1 {
position: relative;
z-index: 2;
}
#abs-div {
position: absolute;
z-index: 1000;
}
#div2 {
position: relative;
z-index: 1;
}