html - 定位元素在 MSIE7 流中的下一个定位元素下消失

Question

有时会遇到这个问题，但我总是使用一些替代代码来避免它。

不幸的是，这一次我需要帮助。

在 IE7 中，如果两个兄弟 DIVS 有“position:relative”绝对定位的孩子他们的“下一个兄弟 DIV”下消失

http://jsfiddle.net/qN74X/

<div style="width:200px;position:relative;background:yellow;">XXX
    <div style="position:absolute;z-index:1;background:red;
                height:70px;top:0;left:50%;">ZZZ</div>
</div>

<div style="position:relative;width:200px;background:pink;">YYY</div>

我该如何解决这个问题？

谢谢

Answer 1

将鼠标悬停在元素上时，也将其设置为 z-index（不仅仅是提示）。这是主要的变化：

body > div{
    position:relative;
    z-index:1;
}
body > div:hover{
    z-index:5;
    border:0 none;
}

基本上，在外部容器（背景所在的位置）上需要改变它的 z-index。我也不确定为什么我需要放置border：0 none，但没有它，它不起作用。

jsfiddle：http: //jsfiddle.net/qN74X/3/