相对定位和绝对定位混淆

Question

我是 html/css 的新手，我刚刚开始围绕定位进行思考，但我似乎有一个误解。现在我正在尝试创建一个页面标题，其下方有一个水平分隔线。我的标题是绝对定位的，顶部和左侧的值为 0，高度为 88。我想如果我给我的水平分隔线位置：相对，高度为 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

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

如果元素是position: static，则相对定位相对于它的定位位置（而不是相对于任何其他元素）。

由于#header 是绝对定位的，.horizontal-divider 没有定位在它之后。

如果你想让一个元素在一个绝对定位的元素之后立即渲染，那么：

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

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

Answer 2

当任何 div 被赋予绝对定位时，它就会从 html 页面的正常流程中移除。因此，水平规则和随后的其他 div 就像标题存在一样。由于标头具有相对定位，因此它位于正常流程中，并且相对于正常流程中的第一个 div（在这种情况下没有）。因此，它位于顶部。希望这会有所帮助。

Answer 3

如果您尝试将position:absolute 与position:relative 一起使用，那么您的position:absolute 包装器应该在position:relative 内，那么只有使用position:absolute 才有好处

就像这里是你工作的例子Fiddle 或者你可以按照下面的代码：

<!-- The CSS -->
<style type="text/css">
#header {
position: relative;
top: 0px;
left: 0px;
height: 88px;
width: 100%;
background-color: #f00;
}
.horizontal-divider {
background-color: #999;
border: 1px solid #000;
bottom: 0;
height: 5px;
position: absolute;
width: 100%;
}
</style>

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

一个很好的定位元素教程在这里CSS-Tricks

Answer 4

如果你给出相对于任何元素的位置，那么你可以将该元素移动到顶部、底部、左侧或右侧。并且是独立的

绝对元素依赖于它最近的相对父元素。如果你有任何元素只在一个盒子里。那么那个框的位置一定是相对的。

例子：

<div class="example">
    <div class="test">
        <div class="child">
            <p>Sample Text</p>
        </div>
    </div>
</div>

如果您希望段落标签出现在测试 div 中，那么 .test 的位置必须是相对的。

同样，如果您希望段落标签出现在示例 div 中，那么 .example 的位置必须是相对的。