我是 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;
}
最佳答案
绝对定位相对于其包含 block 的边缘定位元素。它的包含 block 是其最近的祖先,它的 position
设置为任何非静态的。它还使元素脱离正常流,因此它不会影响其后任何内容的位置。
如果一个元素是position: static
(而不是相对于任何其他元素),则相对定位相对于它应该定位的位置来定位元素。
因为#header 是绝对定位的,.horizontal-divider
没有定位在它之后。
如果你想让一个元素在一个绝对定位的元素之后立即呈现,那么:
- 不要绝对定位第一个元素
- 将这两个元素放在另一个(容器)元素中(因此它们在正常流中一个接一个地布置)
- 绝对定位容器元素
也就是说,您应该能够通过在页眉上设置 border-bottom
并完全移除分隔线来获得您想要的效果。
关于css - 相对和绝对定位混淆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17909465/