3

我是 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;
}
4

4 回答 4

4

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

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

由于#header 是绝对定位的，.horizontal-divider因此不会定位在它之后。

如果您希望元素在绝对定位的元素之后立即呈现，那么：

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

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

于 2013-07-28T15:00:01.780 回答
0

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

于 2013-07-28T15:01:51.530 回答
0

如果您尝试使用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上有一个非常好的定位元素教程

于 2013-07-28T15:09:08.163 回答
0

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

绝对元素取决于其最近的相对父级。如果你有任何元素只在一个盒子里。那么那个盒子的位置必须是相对的。

例子：

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

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

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

于 2018-10-31T06:45:16.920 回答