将绝对定位项目放在相对项目上。 （IE）

Question

请参阅test site。在IE（6＆amp; 7）中遇到问题，让绝对定位的项目出现在一个相对定位的项目上。

黄色框（绝对）应出现在蓝色框（相对）上方。我尝试给蓝色的z-index低于黄色，但这似乎不起作用。

任何帮助都会很棒。

Answer 1

您需要在橙色框上设置z-index，因为那是包含黄色框的那个。在IE6 / 7中，黄色框只有比橙色容器内其他元素更高的z-index。

#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以消除浏览器的任何误解。