固定标题下推内容
在我的标题中,我放置了页面标题和导航栏,但是一旦我设置了它位置:固定;顶部的边距增加了。以下是 Codepen 的链接:
您面临边距崩溃问题。固定标题后,您将其从流程中删除,您的表单成为第一个流入元素,因此其上边距将与正文的上边距合并1。这意味着主体将有一个很大的上边距,并且您的固定元素将根据主体进行定位,因为您没有设置任何顶部值2。
为了避免这种情况,您只需需要禁用边距折叠(我建议这样做以避免其他问题)或设置顶部值以将元素移动到您想要的位置
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*/ }
1 [这个边距不会出现,因为body没有设置margin,它是元素和body之间的空间](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)
2 [了解更多关于如何这在本文中有效。](https://css-tricks.com/ Couple-margin-collapsing-gotchas/)
以上是为什么我的固定标题会压低我的内容,我该如何修复它?的详细内容。更多信息请关注PHP中文网其他相关文章!