首页 > web前端 > css教程 > 为什么我的固定标题会压低我的内容,我该如何修复它?

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

Mary-Kate Olsen
发布: 2024-12-16 15:32:18
原创
374 人浏览过

Why Does My Fixed Header Push Down My Content, and How Can I Fix It?

固定标题下推内容

在我的标题中,我放置了页面标题和导航栏,但是一旦我设置了它位置:固定;顶部的边距增加了。以下是 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板