css - 绝对位置和 margin 底部

Question

我有这个绝对定位的容器。它的问题是我不能给它一个 margin 底值!

无论那个绿色容器中有多少内容我都想要..我希望下一个 div(下)总是在它下面 30px

我不能那样做，我也不知道为什么!

http://jsfiddle.net/nxFkG/54/

html

<div class="bg-black">
    <div class="bg-green">
        <ul>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
    </div>
</div>

<div class="under">
    <h1>THIS SHOULD BE UNDER THE GREEN CONTAINER NO MATTER HOW MUCH THE CONTENT INSIDE IT</h1>
</div>

CSS

.bg-black {
    background-color: #000;
    position: relative;
    width: 160px;
    height: 120px;
}
.bg-green {
    width: 120px;
    position: absolute;
    background-color: green;
    margin-bottom:163px;
}

关于如何做以及为什么会发生的任何帮助!!

谢谢

Answer 1

绝对定位的元素从正常流中移除，并且不能影响正常流中的元素。