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

本文介绍了绝对定位元素裁剪，如果位置在其父项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