為什麼我的固定標題在設定'position:fixed;”後會向下移動？-css教學-PHP中文網

為什麼我的固定標題在設定'position:fixed;”後會向下移動？

Mary-Kate Olsen

發布： 2024-12-10 19:17:14

原創

501 人瀏覽過

Why Does My Fixed Header Shift Downward After Setting `position: fixed;`?

為何我的標題欄在設定為固定後下移？

問題內容

我的標題欄放置在網頁標題和導航欄，但是當我將它設定為position:fixed; 時，它上方的邊距卻增加了。以下為Codepen 連結：

[Codepen 連結]

問題解答

你遇到了一個名為邊距折疊你遇到了一個名為邊距折疊你遇到了一個名為邊距折疊你遇到了一個名為折疊

或重疊在一起。 ¹

這意味著 body 元素將具有較大的上邊距，並且你的固定元素相對於 body 進行定位，因為你沒有設定任何頂部值。

要避免這種情況，你可以選擇下列方法：
停用邊距折疊(建議)：這樣可以避免邊距折疊和許多其他問題。

設定頂部值：將標題列移到你想要的位置。

已解決的程式碼：

<br>body { padding-top:1px; /<p>停用邊距摺疊</p>/<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{
}

header-img{

header-img{

header-img{

header-img{
font-family: 'Permanent Marker', cursive;
color:white;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:nn; 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;
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%; 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;
登入後複製
}
#header{
height:4.5rem;
登入後複製
}
}
}

<h1> <nav id="nav-bar"><br><br><br></nav><br><pre class="brush:php;toolbar:false"><ul> <li><a href="#">Community</a><li> <li><a href="#courses"><b>Catalog</b></a><li> <li><a href="#">Pricing</a><li> </ul>
登入後複製

<hr>
登入後複製

;

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" alt="python"> <p>
登入後複製

以上是為什麼我的固定標題在設定'position:fixed;”後會向下移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！