绝对位置和保证金底部

Question

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

无论那个绿色容器里有多少内容我都想要..我想要下一个div（下）总是在它下面30px

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

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

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

Answer 2

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

移除绝对定位（本质上使元素对其他元素不可见）并移除父级高度
使用具有所需色标的线性渐变，包括transparent

示例

* {
  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>

绝对位置和保证金底部

position absolute & margin bottom

css

position

margin

margins

absolute

示例