logo标签列表

相对定位和绝对定位的混淆问题

csshtmlcss-position
3
我是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;
}
4个回答
4
绝对定位是相对于其“包含块”的边缘定位元素。其“包含块”是最近的祖先元素，该元素的position属性设置为除static以外的任何值。它还将元素从正常流中移出，因此不会影响其后跟随的任何元素的位置。
相对定位是相对于元素如果被设置为position: static（而不是相对于任何其他元素）时的位置来定位元素。
由于#header是绝对定位的，因此.horizontal-divider并没有定位在其之后。
如果您想要一个元素紧随一个绝对定位的元素呈现，则应：
1. 不要对第一个元素进行绝对定位 2. 将两个元素放置在另一个（容器）元素中（因此它们按正常流程一个接一个地布局） 3. 对容器元素进行绝对定位
话虽如此，您应该能够通过在标题上设置border-bottom并完全删除分隔符来获得所需的效果。
0
如果您正在尝试使用position:relative与position:absolute，那么您的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

0
当给任何div设置绝对定位时，它将从HTML页面的正常流程中移除。因此，水平线和后续的其他div会像标题不存在一样进行布局。由于标题具有相对定位，它处于正常流程中，并且相对于正常流程中的第一个div进行定位（在这种情况下没有）。所以，它就在顶部。希望这能帮到你。
0
如果您将相对位置赋予任何元素，则可以将该元素移动到顶部、底部、左侧或右侧。而且它是独立的。
绝对定位的元素取决于其最近的相对父级。如果您希望任何元素仅在一个框内，则该框的位置必须是相对的。
例如：
<div class="example">
    <div class="test">
        <div class="child">
            <p>Sample Text</p>
        </div>
    </div>
</div>

如果你想让段落标签在测试 div 中存在，那么 .test 的位置必须是相对的。
同样地，如果你想让段落标签在示例 div 中存在，那么 .example 的位置也必须是相对的。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接