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

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

The yellow box (absolute) should开发者_Go百科 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.

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;
}

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.