为什么我的固定标题在设置'position:fixed;”后会向下移动？
为何我的标题栏在设置为固定后下移？
问题内容
我的标题栏放置在网页标题和导航栏，但是当我将它设置为 position:fixed; 时，它上方的边距却增加了。以下为 Codepen 链接：
[Codepen 链接]
问题解答
你遇到了一个名为 边距折叠 的问题。将标题栏设置为 fixed 后，将其移出了正常文档流。因此，表单成为了第一个正常文档流元素。这意味着表单顶部边距将与 body 元素的顶部边距 折叠 或重叠在一起。1
这意味着 body 元素将具有较大的上边距，并且你的固定元素相对于 body 进行定位，因为你没有设置任何顶部值。2
要避免这种情况，你可以选择下列方法：
- 禁用边距折叠 (推荐)：这样可以避免边距折叠和许多其他问题。
- 设置顶部值：将标题栏移动到你想要的位置。
已解决的代码：
<p>body {<br> padding-top:1px; /<em>禁用边距折叠</em>/<br>}</p><p>#header{</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">background-color:#191919;
height:3rem;
width:100%;
position:fixed;}
header-img{
font-family: 'Permanent Marker', cursive;
color:white;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:none;
display:flex;
flow-direction:row;
justify-content:space-around;
}
nav-bar{
background-color:#191919;
float:left;
width:100%;
}
form{
margin-top:45rem;
margin-left:25%;
margin-right:25%;
}
img{
width:70%;
height:70%;
}
a {
text-decoration:none;
font-family: 'Work Sans', cursive;
color:white;
font-size:12px;
}
email{
width:100%;
box-shadow:3px 3px 5px grey;
}
submit{
font-family:'Roboto', cursive;
font-size:14px;
font-weight:bold;
color:#686868;
box-shadow:3px 3px 5px grey;
padding: 5px 5px;
}
.catalog{
margin-left:10%;
margin-right:10%;
margin-top:5rem;
width:90%;
float:left;
}
password{
width:100%;
box-shadow:3px 3px 5px grey;
}
video{
margin-top:5rem;
margin-left:25%;
margin-right:25%;
width:50%;
}
courses{
display:flex;
flow-direction:row;
flex-wrap:wrap;
}
description{
font-family: 'Oswald', cursive;
font-size: 20px;
text-align:center;
font-size:16px;
}
li{
padding: .25rem .5rem;
}
a:hover{
color:#4ba0c8;
}
.nav-link{
}
.course-label{
字体系列：'Baloo Bhaijaan'，草书；
字体大小:18px;
}
.images{
background-color:#191919; height:3rem; width:100%; position:fixed;
}
.images:hover{
背景颜色:#99d3ff;
颜色：#99d3ff;
}
@media（最小宽度：555px）{
#nav-bar{
margin: 5% 5%; padding: 3% 3%; width: 10vw; height:10vw; color:#d2d2d2;
}
#form{
float:right; width:20rem; margin-right:1rem;
}
}
@media（最小宽度：360px） {
一个{
margin-top:5rem;
}
#description{
font-size:16px;
}
#header-img{
font-size:20px;
}
#header{
font-size:30px;
}
}
<h1> <nav id="nav-bar"><pre class="brush:php;toolbar:false">height:4.5rem;
<表单>
<ul>
<li><a href="#">Community</a><li>
<li><a href="#courses"><b>Catalog</b></a><li>
<li><a href="#">Pricing</a><li>
</ul></p>
登录后复制
<ul> <li><a href="#">Community</a><li> <li><a href="#courses"><b>Catalog</b></a><li> <li><a href="#">Pricing</a><li> </ul></p>
以上是为什么我的固定标题在设置'position:fixed;”后会向下移动？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？
Apr 05, 2025 pm 05:51 PM
关于Flex布局中紫色斜线区域的疑问在使用Flex布局时，你可能会遇到一些令人困惑的现象，比如在开发者工具（d...
