Mengapa Pengepala Tetap Saya Menolak Kandungan Saya, dan Bagaimana Saya Boleh Membetulkannya?

Pengepala tetap menolak kandungan ke bawah

Dalam pengepala saya, saya meletakkan tajuk halaman dan bar navigasi saya, tetapi sebaik sahaja saya menetapkannya kedudukan:tetap; margin di bahagian atas meningkat. Berikut ialah pautan ke Codepen:

Anda menghadapi masalah margin runtuh. Selepas membuat pengepala dibetulkan, anda mengalih keluarnya daripada aliran dan borang anda menjadi elemen aliran masuk pertama dengan itu jidar atasnya akan runtuh dengan jidar atas badan¹. Ini bermakna badan akan mempunyai jidar atas yang besar dan elemen tetap anda akan diposisikan memandangkan badan kerana anda tidak menetapkan sebarang nilai teratas².

Untuk mengelakkan ini, anda hanya perlu untuk melumpuhkan keruntuhan margin (yang saya cadangkan untuk mengelakkan isu lain) atau tetapkan nilai teratas untuk mengalihkan elemen ke tempat anda mahu.

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*/
}

¹ [margin ini tidak muncul kerana badan tidak mempunyai set margin, ia adalah ruang antara elemen dan badan ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [Baca lebih lanjut tentang cara ini berfungsi dalam artikel ini.](https://css-tricks.com/couple-margin-collapsing-gotchas/)

Atas ialah kandungan terperinci Mengapa Pengepala Tetap Saya Menolak Kandungan Saya, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!