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中，您会发现子元素的最后20像素被裁剪。如何解决这个问题？谢谢（THX）。

- yazz

---

你有现成的例子吗？这里有一个：http://jsfiddle.net/PCg6m/ - Kyle

太棒了！当我分解我的原始代码时，我认为它不会起作用，但显然它可以。现在我知道这不是一个错误，所以我将再次审查我的代码。希望我能解决这个问题。 - yazz

现在我找到了问题所在。如果它是父元素的兄弟元素，并且已经分配了相对位置，则会出现此问题。 http://jsfiddle.net/DrhBE/ - yazz

我找到了。我只是给相对定位的元素设置了一个z-index，看起来它可以工作了。不得不说这是第一次。我以前从未给相对定位的元素设置过z-index。可爱的IE！ - yazz

嗯，z-index只对定位元素起作用，但我很高兴你找到了问题所在。 - Kyle

如果这是您问题的解决方案，请将其添加为解决方案并接受它。 - jackocnr

Answer 1

这只是IE7中著名的z-index bug。
问题出在IE7对所有定位元素应用了z-index=0，即position != static的元素都有z-index=0。
这导致了层叠上下文造成了这个问题。

- Prahlad