Mengapakah Elemen Saya Tidak Benar atau Tetap Di Tempat Saya Mengharapkannya?-tutorial css-php.cn

Mengapakah Elemen Saya Tidak Benar atau Tetap Di Tempat Saya Mengharapkannya?

Mary-Kate Olsen

Lepaskan： 2024-12-30 09:03:14

asal

783 orang telah melayarinya

Why Aren't My Absolutely or Fixed-Positioned Elements Where I Expect Them?

Mengapa Elemen Mutlak atau Tetap Kedudukan Tidak Diletakkan Di Tempat Yang Dijangkakan

Dalam penentududukan CSS, elemen mutlak dan tetap diletakkan relatif kepada viewport atau elemen induk kedudukan terdekat , masing-masing. Walau bagaimanapun, memahami tingkah laku mereka kadangkala boleh mencabar.

Memahami Kedudukan Statik

Apabila sifat kedudukan elemen ditetapkan kepada auto atau statik, ia menganggap kedudukan statik. Ini bermakna ia akan diletakkan seolah-olah kedudukannya statik. Dalam kes ini, kedudukan elemen dikira berdasarkan jidar, sempadan, padding dan kandungannya.

Senario 1: Kotak Kelabu Mutlak Di Luar Induk Relatif

Dalam coretan kod pertama anda, kotak kelabu mempunyai kedudukan mutlak. Walau bagaimanapun, bekas induk (

) mempunyai kedudukan: relatif; hartanah, yang mewujudkan konteks kedudukan baharu untuk anak-anaknya. Oleh kerana kotak kelabu adalah anak terakhir, kotak itu akan diletakkan relatif kepada bahagian bawah bekas.

Senario 2: Kotak Kelabu Bukan di Sudut Kiri Atas

Dalam coretan kod kedua anda , anda telah mengalihkan kotak kelabu ke kedudukan kedua dalam bekas. Walau bagaimanapun, ia masih tidak berada di penjuru kiri sebelah atas kerana bekas itu mempunyai pelapik: 40px 20px; peraturan, yang mempengaruhi kedudukan statik hipotesis unsur. Kotak kelabu akan diletakkan relatif kepada kedudukan statik terlaras ini.

Kesimpulan

Untuk meletakkan elemen mutlak atau tetap dengan betul, adalah penting untuk memahami konsep kedudukan statik dan cara ia dikira berdasarkan jidar, sempadan, padding dan kandungan. Pengetahuan ini membolehkan anda menjangkakan gelagat elemen ini dalam konteks kedudukan yang berbeza.

Atas ialah kandungan terperinci Mengapakah Elemen Saya Tidak Benar atau Tetap Di Tempat Saya Mengharapkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!