Css 相对和绝对定位混淆

我是html/css新手，我刚刚开始思考定位问题，但我似乎有一个误解。现在，我正在尝试创建一个页面标题，标题下方有一个水平分隔符。我的标题是绝对定位的，顶部和左侧的值为0，高度为88。我想，如果我给出我的水平分隔线位置：相对，高度为5，它将在我的标题下结束。相反，它会出现在页面的最顶端，我不知道为什么

我想在我的页面上再次使用这个水平分隔符，就在我的页脚上方，所以我不想给这个水平分隔符

位置：绝对
和
顶部：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;
}


#标题{
位置：绝对位置；
顶部：0px；
左：0px；
高度：88px；
宽度：100%；
}
.水平分隔器{
位置：相对位置；
高度：5px；
宽度：100%；
顶部：0px；
背景色：白色；
边框：1px纯黑；
}
绝对定位相对于其包含块的边缘定位元素。它的包含块是其最近的祖先，其
位置设置为非静态的任何内容。它也会使元素脱离正常的流动，因此它不会影响跟随它的任何东西的位置

相对定位将一个元素相对于其在
位置：静态时的定位位置进行定位（而不是相对于任何其他元素）

由于#标题是绝对定位的，
。水平分隔符
不在其后面定位

如果希望在绝对定位的元素之后立即渲染元素，则：

不要绝对定位第一个元素
将两个元件放置在另一个（容器）元件中（使其在正常流量下一个接一个地布置）
绝对定位容器元素
这就是说，您应该能够通过在标题上设置
边框底部
并完全删除分隔符来获得想要的效果。
当任何div被赋予绝对位置时，它将从html页面的正常流程中删除。因此，水平尺和后面的其他div的作用就好像头力存在一样。因为收割台有一个相对的位置，它在正常流量中，它的到来相对于正常流量中的第一个div（在这种情况下没有）。所以，它的右边在顶部。希望这能有所帮助。
如果您正试图将
位置：绝对
与
位置：相对
一起使用，那么您的
位置：绝对
包装器应该位于
位置：相对
内，那么使用
位置：绝对

下面是您的工作示例，或者您可以按照以下代码进行操作：

<!-- 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>


#标题{
位置：相对位置；
顶部：0px；
左：0px；
高度：88px；
宽度：100%；
背景色：#f00；
}
.水平分隔器{
背景色：#999；
边框：1px实心#000；
底部：0；
高度：5px；
位置：绝对位置；
宽度：100%；
}

关于定位元素的一个很好的教程在这里
如果您给出了相对于任何元素的位置，那么您可以将该元素移动到顶部、底部、左侧或右侧。及其独立性

绝对元素依赖于其最近的相对父元素。如果您希望任何元素仅位于框中。那么这个盒子的位置必须是相对的

例如：

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


示例文本


如果希望段落标记位于test div中，则.test的位置必须是相对的

类似地，如果希望段落标记位于示例div中，则.example的位置必须是相对的