Apakah yang Berlaku kepada Elemen yang Diposisikan Sepenuhnya tanpa Nilai Atas, Kiri, Bawah atau Kanan yang Jelas?

Memahami Nilai Kedudukan Lalai untuk Kedudukan Mutlak

Dalam CSS, apabila elemen diletakkan secara mutlak, koordinatnya ditentukan secara relatif kepada blok yang mengandunginya . Walau bagaimanapun, apakah yang berlaku apabila tiada nilai eksplisit disediakan untuk sifat atas, kiri, bawah atau kanan? Untuk membongkar misteri ini, mari kita periksa nilai lalai dan implikasinya.

Seperti yang dijangkakan, nilai lalai untuk semua sifat ini bukan sifar, sebaliknya "auto". Mengikut spesifikasi CSS (Seksyen 9.3.2), apabila semua offset ditetapkan kepada auto untuk kotak yang diposisikan secara mutlak, ia kekal dalam kedudukan asalnya seolah-olah ia tidak diletakkan sama sekali.

Konsep ini menjadi lebih jelas dalam Bahagian 10.3.7 spesifikasi, yang menetapkan bahawa apabila ketiga-tiga kiri, lebar dan kanan adalah automatik, sifat kiri diselesaikan terlebih dahulu. Jika arah unsur adalah kiri-ke-kanan ('ltr'), kiri ditetapkan kepada kedudukan statik; jika tidak, kanan ditetapkan kepada kedudukan statik

Begitu juga, Seksyen 10.6.4 mengawal kekangan dimensi menegak untuk elemen yang diletakkan secara mutlak. Jika bahagian atas, tinggi dan bawah semuanya automatik, sifat atas diberikan kedudukan statik secara lalai.

Dari segi praktikal, ini bermakna elemen yang diletakkan secara mutlak tanpa sebarang nilai koordinat yang jelas akan kekal di tempat yang sepatutnya telah diletakkan secara normal, tanpa sebarang anjakan di lokasinya. Ini dikenali sebagai "kedudukan statik".

Untuk meringkaskan, apabila tiada nilai khusus ditentukan untuk sifat atas, kiri, bawah atau kanan bagi elemen yang diletakkan secara mutlak, mereka menganggap nilai lalai auto, yang berkesan mengekalkan kedudukan asal unsur dalam bekasnya.

Atas ialah kandungan terperinci Apakah yang Berlaku kepada Elemen yang Diposisikan Sepenuhnya tanpa Nilai Atas, Kiri, Bawah atau Kanan yang Jelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!