html - 如果位置在其父项 IE7 之外，则绝对定位元素剪裁

Question

你好

我试图定位一个元素，使其略微位于其父项之外。在 IE8 中它可以工作，但在 IE7 中定位的元素被剪裁。

这是我的代码 HTML:

<div id="parent">
    <div id="child">text</div>
</div>

CSS

#parent {
height: 40px;
width: 400px;
position: relative;
}

#child {
position: absolute;
width: 100px;
height: 60px;
top: 0px;
left: 0px;
}

在 IE7 中，您会看到子元素的最后 20px 被剪掉了。我该如何解决这个问题？

感谢

Answer 1

就是著名的z-index bug对于 IE7
IE7 的问题在于它对所有定位元素应用 z-index=0
即 position != static 的元素有 z-index=0。
所以最终这个 stacking context导致问题的原因