Getting the absolute positional element over the relative. (IE)

Question

Refer to the test site . There were problems with IE (6 & 7), getting an element with absolute positioning, which will be displayed on top of the one that is located relatively.

A yellow box (absolute) should appear above the blue box (relative). I tried to give the blue index z lower than yellow, but this does not seem to work.

Any help would be great.

Answer 1

You need to set the z-index on the orange box, since the one that contains the yellow frame. In IE6 / 7, the yellow box will only have a higher z index than other items 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

z-index :

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

, z-index , .