绝对位置&保证金底部

时间:2015-10-01 23:14:34

标签: css position margin absolute margins

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

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

任何有关如何做到这一点的帮助&amp;为什么会发生!!

谢谢

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

  • 删除绝对定位(这实际上使元素对其他元素不可见)并删除父项高度
  • 使用具有所需颜色停止的线性渐变,包括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>