将绝对定位的项目置于相对项目之上。（IE）答案

【问题标题】：Getting absolute positioned item over a relative one. (IE)将绝对定位的项目置于相对项目之上。（IE）
【发布时间】：2011-07-25 16:05:17
【问题描述】：

请参考test site。在 IE (6&7) 中出现问题，让绝对定位的项目出现在相对定位的项目之上。

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

任何帮助都会很棒。

【问题讨论】：

标签： css

【解决方案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;
}

【讨论】：

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

【讨论】：