html - 具有 "min-height"和 "top"属性的 2 个 div 位置

Question

我有 2 个 min-height 的 div。第一个的 top 属性为 470px。我希望第二个 div 在第一个 div 的下方显示星光，中间没有任何空间。我也尝试过显示: block 并将 div 放入表格中，但两者都没有更好的效果。这是 te css:

#content {
  width: 100%;
  position: absolute;
  top: 470px;
  background: #1C1C1C;
  min-height: 100px;
  overflow: hidden;
}

#content2 {
  width: 100%;
  position:;
  top:;
  background: #333333;
  min-height: 100px;
  overflow: hidden;
}

HTML:

    <div id="content">
        <p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
    </div>


    <div id="content2">
        <p>texttexttexttexttext</p>
    </div>

Answer 1

一旦你绝对定位了一个元素，你就把它从文档流中取出来，所以你不能真的让东西紧随其后，除非你也绝对定位它。我将其更改为仅使用顶部边距将其放在您想要的位置。如果您需要顶部 470 像素的元素，那么您绝对可以定位这些元素。

我添加的边框仅供引用。

#content {
  border: 1px solid red;
  margin-top: 470px;
  background: #1C1C1C;
  min-height: 100px;
  overflow: hidden;
}

#content2 {
  border: 1px solid blue;
  background: #333333;
  min-height: 100px;
  overflow: hidden;
}

<div id="content">First DIV</div>
<div id="content2">Second DIV</div>