Mengapa Elemen Tetap Boleh Dijejaskan oleh Adik Beradik Tidak Berkedudukan?

Memahami Gelagat Elemen Tetap: Mengapa Mereka Boleh Dijejaskan Oleh Adik Beradik Tidak Berjawatan

Dalam bidang penentududukan CSS, ia muncul membingungkan mengapa unsur dengan kedudukan: tetap boleh dipengaruhi oleh unsur adik beradik yang tidak berkedudukan. Walau bagaimanapun, memahami mekanik asas mendedahkan penjelasan yang logik.

Elemen dengan kedudukan: tetap dialih keluar daripada aliran dokumen biasa dan diposisikan berbanding dengan port pandangan penyemak imbas. Port pandangan ialah kawasan kelihatan halaman web dalam tetingkap penyemak imbas.

Dalam contoh yang anda berikan, elemen pengepala ditetapkan, manakala elemen utama mempunyai margin atas: 90px. Yang menghairankan, pengepala bergerak ke bawah seolah-olah ia dipengaruhi oleh jidar.

Untuk memahami gelagat ini, kita mesti mempertimbangkan peranan jidar CSS runtuh. Apabila dua elemen dengan jidar bersentuhan, jidarnya bergabung menjadi satu jidar. Dalam kes ini, elemen badan (induk unsur utama) mempunyai margin lalai 8px. Apabila jidar atas unsur utama 90px digunakan, jidar runtuh berlaku, menghasilkan jidar gabungan 98px.

Jind gabungan ini menganjakkan kedua-dua badan dan elemen utama ke bawah sebanyak 98px. Memandangkan pengepala ditetapkan relatif kepada port pandangan, ia bergerak bersama port pandang, yang dikira berdasarkan elemen dalam aliran dokumen. Memandangkan elemen utama ialah elemen aliran masuk pertama, marginnya mempengaruhi pengiraan port pandangan, menyebabkan pengepala kelihatan bergerak ke bawah.

Pada dasarnya, kedudukan pengepala tetap tidak dipengaruhi secara langsung oleh bukan -berkedudukan adik beradik dari segi kedudukan fizikal. Walau bagaimanapun, jidar adik beradik mempengaruhi pengiraan viewport, secara tidak langsung mempengaruhi pergerakan jelas pengepala.

Atas ialah kandungan terperinci Mengapa Elemen Tetap Boleh Dijejaskan oleh Adik Beradik Tidak Berkedudukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!