Rumah >hujung hadapan web >tutorial css >Mengapa Pengepala Tetap Saya Beralih Ke Bawah Selepas Menetapkan `kedudukan: tetap;`?
Mengapa Pengepala Tetap Saya Beralih Ke Bawah Selepas Menetapkan `kedudukan: tetap;`?
- Mary-Kate Olsenasal
- 2024-12-10 19:17:14481semak imbas
Mengapa bar tajuk saya bergerak ke bawah selepas menetapkannya kepada tetap?
Kandungan soalan
Bar tajuk saya diletakkan di antara tajuk halaman dan bar navigasi, tetapi apabila saya menetapkannya kepada position:fixed; . Berikut ialah pautan Codepen:
[Pautan Codepen]
Jawapan Soalan
Anda menghadapi masalah yang dipanggil Runtuh Margin masalah. Menetapkan bar tajuk kepada tetap akan mengalihkannya keluar daripada aliran dokumen biasa. Oleh itu, borang menjadi elemen aliran dokumen biasa yang pertama. Ini bermakna jidar atas borang akan runtuh atau bertindih jidar atas elemen badan. 1
Ini bermakna elemen badan akan mempunyai jidar atas yang lebih besar dan elemen tetap anda akan diletakkan secara relatif kepada badan kerana anda tidak menetapkan sebarang nilai teratas. 2
Untuk mengelakkan situasi ini, anda boleh memilih kaedah berikut:
- Lumpuhkan lipatan jidar (disyorkan): Ini berfungsi Elakkan margin runtuh dan banyak masalah lain.
- Tetapkan Nilai Tertinggi: Alihkan bar tajuk ke tempat yang anda inginkan.
Kod diselesaikan:
< pra>
badan {
padding-top:1px; /Lumpuhkan lipatan jidar/
}
#header{
background-color:#191919; height:3rem; width:100%; position:fixed;
}
header-img{
font-family: 'Penanda Kekal', kursif;
color:white;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:none;
display:flex;
flow-direction:row;
justify-content:space-round;
}
nav-bar{
background-color:#191919;
float:left;
lebar:100%;
}
borang{
margin-top:45rem;
margin-kiri:25%;
margin-right:25%;
}
img{
lebar:70%;
ketinggian:70%;
}
a {
text-decoration:none;
font-family: 'Work Sans', kursif;
color:white;
saiz fon:12px;
}
e-mel{
lebar:100%;
bayang kotak:3px 3px 5px kelabu;
}
serahkan{
fon-family:'Roboto', kursif;
font-size:14px;
font-weight:bold;
warna:#686868;
bayang kotak:3px 3px 5px kelabu;
padding: 5px 5px;
}
.catalog{
margin-left:10%;
margin-right:10%;
margin-top: 5rem;
lebar:90%;
float:left;
}
kata laluan{
lebar:100%;
box-shadow:3px 3px 5px kelabu;
}
video{
margin-top:5rem;
margin-left:25%;
margin-right:25%;
lebar:50%;
}
kursus{
paparan:flex;
arah aliran:baris;
flex-wrap:wrap;
}
penerangan{
fon-keluarga: 'Oswald', kursif;
saiz fon: 20px;
text-align:center;
font-size:16px;
}
li{
padding: .25rem .5rem;
}
a:tuding{
warna:#4ba0c8;
}
.pautan nav{
}
.label-kursus{
jenis huruf: 'Baloo Bhaijaan', kursif;
saiz fon:18px;
}
.imej{
background-color:#191919; height:3rem; width:100%; position:fixed;
}
.imej:tuding{
warna latar belakang:#99d3ff;
warna:#99d3ff;
}
@media (lebar min:555px){
#nav-bar{
margin: 5% 5%; padding: 3% 3%; width: 10vw; height:10vw; color:#d2d2d2;
}
#form{
float:right; width:20rem; margin-right:1rem;
}
}
@media (lebar min:360px){
a{
margin-top:5rem;
}
#penerangan{
font-size:16px;
}
#header-img{
font-size:20px;
}
#header{
font-size:30px;
}
}
<h1> <nav id="nav-bar"></p> <pre class="brush:php;toolbar:false">height:4.5rem;
< div>
Atas ialah kandungan terperinci Mengapa Pengepala Tetap Saya Beralih Ke Bawah Selepas Menetapkan `kedudukan: tetap;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!