为什么我的固定标题会压低我的内容，我该如何修复它？

固定标题下推内容

在我的标题中，我放置了页面标题和导航栏，但是一旦我设置了它位置：固定；顶部的边距增加了。以下是 Codepen 的链接：

您面临边距崩溃问题。固定标题后，您将其从流程中删除，您的表单成为第一个流入元素，因此其上边距将与正文的上边距合并¹。这意味着主体将有一个很大的上边距，并且您的固定元素将根据主体进行定位，因为您没有设置任何顶部值²。

为了避免这种情况，您只需需要禁用边距折叠（我建议这样做以避免其他问题）或设置顶部值以将元素移动到您想要的位置

body {
 padding-top:1px; /*disable margin-collpasing*/
}

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

¹ [这个边距不会出现，因为body没有设置margin，它是元素和body之间的空间](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [了解更多关于如何这在本文中有效。](https://css-tricks.com/ Couple-margin-collapsing-gotchas/)

以上是为什么我的固定标题会压低我的内容，我该如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！