将div放在div下面，绝对位置

Question

我有以下内容：http://jsfiddle.net/6H4RA/1/

我如何将红色矩形直接放在绿色矩形（绝对定位）下面，知道绿色矩形的高度可以变化？

HTML：

<div class="absolute"></div>
<div class="footer"></div>

CSS：

.absolute {
    width: 600px;
    height: 600px;
    background: green;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    z-index: -1;
}

.footer {
    width: 600px;
    height: 100px;
    background: red;
    z-index: 1;
}

Answer 1

我不确定你要问的是什么。我从.absolute div中取出了定位和边距，然后将定位添加到.footer div

请参阅此Fiddle

.absolute {
    width: 600px;
    height: 600px;
    background: green;
    left: 50%;
    z-index: -1;
}
.footer {
    width: 600px;
    height: 100px;
    background: red;
    z-index: 1;
    position:absolute;
}