绝对定位元素裁剪，如果位置在其父项IE7之外 [英] absolute positioned element clipping if position outside its parent item IE7

问题描述

Hi

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

Im trying to position an element so its slightly positioned outside its parent item. In IE8 it works but in IE7 the positioned element gets clipped.

这是我的代码HTML：

Here's my code 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被剪辑。
我如何解决这个问题？

In IE7 you will see that the last 20px of the child element gets clipped. How can I solve this?

THX

推荐答案

它就是IE7的着名的 z-index bug

IE7的问题是它对所有定位的元素应用z-index = 0。

ie：position！= static的元素的z-index = 0。

因此，最终导致问题的堆叠上下文

Its just the famous z-index bug for IE7
The problem with IE7 is that it applies z-index=0 for all the positioned elements
i.e elements with position != static has z-index=0.
So eventually this stacking context that causes the issue

这篇关于绝对定位元素裁剪，如果位置在其父项IE7之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！