获取相对定位元素上面的绝对定位元素（IE）

Question

请参考测试网站。在IE（6＆7）中遇到了问题，无法使绝对定位的项目出现在相对定位的项目上方。

黄色盒子（绝对定位）应该出现在蓝色盒子（相对定位）之上。我尝试将蓝色盒子的z-index设置为比黄色盒子低，但似乎没有起作用。

任何帮助都将是极好的。

- Louis W

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

- peirix

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

- user151323