css - 相对和绝对定位混淆

Question

我是 html/css 的新手，我刚刚开始思考定位问题，但我似乎有一个误解。现在我正在尝试创建一个页眉，其正下方有一个水平分隔线。我的页眉是绝对定位的，顶部和左边的值为 0，高度为 88。我想如果我给水平分隔线position:relative，高度为 5，它会在我的页眉正下方结束。相反，它最终出现在页面的最顶部，我很困惑为什么。

我想在我的页面上再次使用这个水平分隔线，就在我的页脚上方，所以我不想给这个水平分隔线 position: absolute 和 top: 88px。感谢任何帮助，非常感谢!

到目前为止我的(非常简单的)代码:

<div id="header"></div>
  <div class="horizontal-divider"></div>

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 88px;
  width: 100%;
}

.horizontal-divider {
  position: relative;
  height: 5px;
  width: 100%;
  top: 0px;
  background-color: white;
  border: 1px solid black;
}

Answer 1

绝对定位相对于其包含 block 的边缘定位元素。它的包含 block 是其最近的祖先，它的 position 设置为任何非静态的。它还使元素脱离正常流，因此它不会影响其后任何内容的位置。

如果一个元素是position: static(而不是相对于任何其他元素)，则相对定位相对于它应该定位的位置来定位元素。

因为#header 是绝对定位的，.horizo​​ntal-divider 没有定位在它之后。

如果你想让一个元素在一个绝对定位的元素之后立即呈现，那么:

1. 不要绝对定位第一个元素
2. 将这两个元素放在另一个(容器)元素中(因此它们在正常流中一个接一个地布置)
3. 绝对定位容器元素

也就是说，您应该能够通过在页眉上设置 border-bottom 并完全移除分隔线来获得您想要的效果。