Mengapa Tandukan Tetap Bergerak dengan Adik Beradik Tidak Berkedudukan?

Memahami Gelagat Elemen Tetap: Mengapa Pengepala Tetap Bergerak dengan Adik Beradik Tidak Kedudukan

Kedudukan tetap dalam CSS meletakkan elemen dalam tetap kedudukan berbanding dengan viewport. Walau bagaimanapun, adalah penting untuk memahami bahawa port pandang dikira berdasarkan elemen dalam aliran dokumen biasa.

Dalam HTML yang disediakan, elemen pengepala ditetapkan manakala elemen utama menggunakan margin atas. Apabila elemen ini diletakkan dalam dokumen, perkara berikut berlaku:

1. Pengepala Tetap: Elemen pengepala, dengan kedudukan: tetap, dialih keluar daripada aliran dokumen dan diletakkan di bahagian atas port pandangan.
2. Pengiraan Aliran Dokumen: Elemen yang selebihnya, bermula dengan elemen utama, wujudkan aliran dokumen. Jidar atas: 90px digunakan pada elemen utama menandakan jarak menegak antara pengepala dan kandungan utama.
3. Pengiraan Port Pandangan: Port pandangan dikira berdasarkan elemen dalam aliran dokumen . Memandangkan elemen aliran masuk pertama ialah elemen utama dengan margin atas 90px, port pandangan bermula pada ketika ini.
4. Margin Runtuh: Elemen badan, induk utama, mempunyai margin lalai 8px. Disebabkan jidar CSS runtuh, jidar atas utama (90px) runtuh dengan jidar atas badan (8px), menghasilkan jidar gabungan 98px.

Akibatnya, kedua-duanya elemen utama dan pengepala beralih ke bawah sebanyak 98px, walaupun pengepala ditetapkan pada port pandangan. Ini kerana port pandangan itu sendiri dilaraskan berdasarkan jidar yang diruntuhkan dalam aliran dokumen.

Oleh itu, adalah penting untuk mempertimbangkan bahawa walaupun elemen tetap diposisikan berbanding dengan port pandangan, kedudukan port pandangan ditentukan oleh elemen dalam aliran dokumen biasa. Pemahaman ini menerangkan sebab pengepala tetap boleh bergerak bersama elemen adik beradik yang tidak diposisikan.

Atas ialah kandungan terperinci Mengapa Tandukan Tetap Bergerak dengan Adik Beradik Tidak Berkedudukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!