Mengapa Elemen Saya Benar-benar/Kedudukan Tetap Memaparkan Di Luar Lokasi?

Elemen Mutlak/Kedudukan Tetap Di Luar Lokasi

Dalam penentududukan CSS, mutlak dan tetap boleh mengelirukan, membawa kepada salah jajaran. Di sini, kami membincangkan sebab elemen sedemikian mungkin tidak dipaparkan seperti yang dijangkakan.

Kes 1: Kotak Kelabu Mutlak Di Luar Induk Relatif

Apabila elemen diletakkan secara mutlak, kedudukannya adalah diambil relatif kepada moyang terdekatnya dengan kedudukan tidak statik. Dalam kes ini, .container induk mempunyai kedudukan: relatif. Walau bagaimanapun, kotak kelabu mutlak berada di luar bekasnya kerana bahagian atasnya ditetapkan kepada automatik (lalai).

Mengikut spesifikasi CSS, apabila bahagian atas dan bawah adalah automatik dan ketinggian bukan automatik, bahagian atas ditetapkan kepada kedudukan statik. Kedudukan ini ditentukan oleh kedudukan elemen jika ia tidak diposisikan secara mutlak.

Dalam kes ini, kedudukan statik kotak kelabu berada di luar bekas kerana tiada margin atau padding di hadapannya. Oleh itu, kotak kelabu diletakkan di sudut kiri atas badan dokumen, bukan bekas.

Kes 2: Kotak Kelabu Tiada di Sudut Kiri Atas selepas Kotak Jingga

Apabila kotak kelabu dialihkan ke kedudukan kedua, ia diletakkan selepas ruang yang ditinggalkan oleh kotak oren. Ini kerana kotak oren mempunyai kedudukan: relatif, yang mencipta konteks tindanan baharu.

Elemen dalam konteks tindanan diletakkan secara relatif kepada nenek moyang kedudukan terdekat dalam konteks tersebut. Kotak kelabu diletakkan selepas kotak oren kerana ia adalah elemen kedudukan seterusnya dalam konteks tindanan bekas.

Kesimpulan

Memahami peraturan yang mengawal kedudukan mutlak dan tetap ialah penting untuk penempatan elemen yang tepat. Dengan mempertimbangkan kedudukan statik, konteks tindanan dan perhubungan antara elemen diposisikan dan tidak diposisikan, pembangun boleh memastikan elemennya diletakkan seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Elemen Saya Benar-benar/Kedudukan Tetap Memaparkan Di Luar Lokasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!