如果位置超出其父项 IE7，则绝对定位元素剪辑答案

【问题标题】：absolute positioned element clipping if position outside its parent item IE7如果位置超出其父项 IE7，则绝对定位元素剪辑
【发布时间】：2014-01-14 23:58:44
【问题描述】：

嗨

我试图定位一个元素，使其稍微位于其父项之外。在 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 中，您会看到子元素的最后 20 像素被剪掉。我该如何解决这个问题？

谢谢

【问题讨论】：

你有活生生的例子吗？这是一个jsfiddle.net/PCg6m
太棒了！当我分解我的原始代码时，我认为它不起作用，但显然它确实起作用。现在我知道它不是错误，所以我将不得不再次检查我的代码。希望我可以关闭这个问题。
现在我发现了问题。如果它的父元素有一个兄弟元素，则该元素的位置相对分配给它。 jsfiddle.net/DrhBE
我找到了。我只是在相对定位的元素上放了一个 z-index，它似乎可以工作。不得不说这是第一次。我以前从未将 z-index 设置为相对定位的元素。可爱的 IE！
如果这是您问题的解决方案，请将其添加为解决方案并接受它。

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

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

【讨论】：