IE7 / IE8上的Z-index

Question

所以这里是我想要做的事情的图片：

http://imageshack.us/content_round.php?page=done&l=img14/1023/62507155.jpg

FF diplay可以，IE8 - 不知道即1台PC上没问题，从另一台检查不行，IE7不行。

我有一个定位相对的div和一个透明的背景图片并覆盖div 2. Div 2位于绝对位置并且以z-index：-1粘贴到div1的底部。

如何在所有浏览器（特别是IE7 / 8）上使其看起来一样？我已经阅读过关于在父div上放置高级z-index而在嵌套div上降低但是它只是让div2在所有浏览器上都处于顶部。

这是代码：

#div1 { 
 position: relative;
 height: 900px;
 width: 850px;
 float: left;
 background: url(img/background-left.png) no-repeat;

}
#div2 {
    position: absolute;
    background: red;
    width: 850px;
    height: 420px;
    bottom: 0px;
    border: none;
    z-index: -1;
}
<div id="div1">
    <div id="div2"></div>
</div>

如果我从div1移除相对位置，那么它的背景总是在div2的顶部，就像我想要的那样，但是没有位置相对的我不能将div 2粘在div1的底部。