Rumah > hujung hadapan web > tutorial css > Mengapa Elemen Saya Benar-benar/Kedudukan Tetap Memaparkan Di Luar Lokasi?

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

Patricia Arquette
Lepaskan: 2024-12-23 15:09:15
asal
225 orang telah melayarinya

Why Are My Absolutely/Fixed-Positioned Elements Displaying Off-Location?

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan