Getting absolute positioned item over a relative one. (IE)

Question

Please refer to test site below. Having problems in IE (6&7) getting an absolute positioned item to appear OVER one that is relatively positioned.

http://tinyurl.com/yzr6xu6

The yellow box (absolute) should appear over the blue box (relative). I tried giving the blue one a z-index lower then yellow, but this did not appear to work.

Any help would be great.

Answer 1

You need to set the z-index on the orange box, since that's the one containing the yellow box. In IE6/7 the yellow box will only have a higher z-index than other elements inside the orange container.

#orange {
   position: relative;
   z-index: 1;
   background-color: orange;
}
#blue {
   background-color:blue;
   height:100px;
   overflow:hidden;
   position:relative;
   width:300px;
}

Answer 2

Specify z-index for the blue box explicitly:

#yellow {
background-color: yellow;
width: 100px;
height: 150px;
position: absolute;
z-index: 200;
}

#blue {
width: 300px;
height: 100px;
overflow: hidden;
background-color: blue;
position: relative;
z-index: 100;
}

Even better, specify z-index for all three boxes to eliminate any misinterpretation by browsers.