html - 使用绝对位置将 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;
}