位置绝对和保证金底部

Question

我有这个绝对定位的容器..它的问题是我不能给它一个保证金底值！

我想要无论绿色容器里面有多少内容..我希望下一个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

这种外观可以通过简单的渐变来实现。

• 删除绝对定位（这实际上使元素对其他元素不可见）并删除父项高度
• 使用具有所需颜色停止的线性渐变，包括transparent

Example

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bg-black {
  background: linear-gradient(to bottom, #000 120px, transparent 120px);
  width: 160px;
}
.bg-green {
  width: 120px;
  background-color: green;
  margin-bottom: 10px;
}

<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>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
    </ul>
  </div>

</div>

<div class="under">
  <h1>Under the green container</h1>

</div>

Answer 2

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