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

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. ¹

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. ²

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;

Salin selepas log masuk

}

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;

Salin selepas log masuk

}

.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;

Salin selepas log masuk

}

#form{

float:right;
width:20rem;
margin-right:1rem;

Salin selepas log masuk

}
}
@media (lebar min:360px){
a{

margin-top:5rem;

Salin selepas log masuk

}
#penerangan{

font-size:16px;

Salin selepas log masuk

}
#header-img{

font-size:20px;

Salin selepas log masuk

}
#header{

font-size:30px;

Salin selepas log masuk

}
}

 <h1> <nav id="nav-bar"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height:4.5rem;

Salin selepas log masuk

< 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!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mencipta Elemen HTML Boleh Diubah Dengan Hanya Menggunakan JavaScript Tulen? Artikel seterusnya：Mengapakah `$(...).DataTable` bukan fungsi?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2204

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2348

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1967

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...