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

Question

Hi

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.

Here's my code HTML:

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

The CSS

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

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

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

THX

Answer 1

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
ie elements with position != static has z-index=0.
So eventually this stacking context that causes the issue