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是绝对定位的，因此<{1}}在之后未定位。

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

绝对不要放置第一个元素

将两个元素放在另一个（容器）元素中（因此它们在正常流程中一个接一个地布局）

绝对定位容器元素

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

Answer 2

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

Answer 3

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

以下是您工作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 的位置必须相对。

相对和绝对定位混乱

4 个答案: