绝对位置和边距底部答案

【问题标题】：position absolute & margin bottom绝对位置和边距底部
【发布时间】：2015-12-30 03:15:45
【问题描述】：

我有这个绝对定位的容器。它的问题是我不能给它一个边距底部值！

无论绿色容器内有多少内容，我都希望 .. 我希望下一个 div（下方）始终位于其下方，且始终为 30 像素

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

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;
}

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

谢谢

【问题讨论】：

标签： css position margin absolute margins

【解决方案1】：

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

【讨论】：

感谢您的信息，但在这种情况下有什么解决方案？有些会比其他添加更多的内容！
@Jobter 不要对应该影响下一个元素的元素使用绝对定位。类似this.
这是为了外观和设计......没有什么可以解决的？！！
一些图片可能对您打算实现的目标有所帮助。

【解决方案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>

【讨论】：