Mengapa Pengepala Tetap Saya Bergerak Ke Bawah, dan Bagaimana Saya Boleh Membetulkannya?

Pengepala Bergerak Ke Bawah Apabila Saya Tetapkan Ia Dibetulkan

Di sini, anda mengalami isu yang dikenali sebagai margin runtuh. Apabila anda membuat kedudukan pengepala:tetap, ia telah dialih keluar daripada aliran biasa dokumen, menjadikan jidar atas elemen berikut (dalam kes ini, bentuk) runtuh dengan jidar atas badan. Ini ialah tingkah laku lalai HTML.

Untuk mengelakkan isu ini dan mengekalkan jarak menegak antara pengepala dan borang, anda mempunyai dua pilihan:

1. Lumpuhkan Margin Runtuh:

   Tambah padding-top: 1px; ke badan CSS anda untuk mengelakkan margin runtuh. Jumlah pelapik yang kecil ini dengan berkesan memecahkan keruntuhan dan membenarkan jidar borang berkuat kuasa.

2. Tetapkan Margin Atas:

   Tambah bahagian atas : [nilai yang dikehendaki]; kepada CSS untuk pengepala anda menetapkan kedudukan menegaknya secara eksplisit berbanding bahagian atas port pandangan. Ini akan mengatasi jidar yang diruntuhkan dan memastikan pengepala anda kekal dalam kedudukan yang diingini.

Kod Kemas Kini (Pilihan 1):

body {
  padding-top: 1px; /* disable margin collapsing */
}

Kod Kemas Kini (Pilihan 2):

#header {
  top: 3rem; /* desired vertical position */
}

Nota:

Jika anda menggunakan rangka kerja seperti Bootstrap atau Materialize CSS, mereka mungkin sudah mempunyai peraturan untuk dikendalikan margin runtuh. Dalam kes itu, anda mungkin perlu membatalkan peraturan tersebut atau menggunakan pendekatan alternatif untuk mencapai kedudukan yang diingini.

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