


Mengapa Float:right Berhenti Berfungsi Apabila Memohon Jawatan:mutlak?
Oct 31, 2024 pm 01:15 PMKonflik Terapung dan Kedudukan Mutlak
Dalam reka letak web, elemen boleh diletakkan dalam pelbagai cara, termasuk kedudukan terapung dan mutlak. Walau bagaimanapun, apabila menggunakan kedua-dua apungan dan kedudukan mutlak pada elemen yang sama, konflik boleh timbul.
Pertimbangkan situasi di mana anda mahu elemen div kekal di tepi kanan div induknya. Menggunakan float:right biasanya akan mencapai hasil ini. Walau bagaimanapun, jika anda turut menggunakan position:absolute pada div yang sama, sifat apungan menjadi tidak berkesan dan div beralih ke tepi kiri induknya.
Sebab bagi kelakuan ini ialah kedudukan mutlak mengalih keluar elemen daripada aliran normal dokumen. Apabila position:absolute digunakan, penyemak imbas mentafsir sebarang sifat terapung dalam kombinasi dengan koordinat mutlak elemen yang baru ditubuhkan. Oleh itu, float:right tidak lagi menjejaskan kedudukan elemen berhubung dengan div induknya.
Untuk menyelesaikan konflik ini dan menjajarkan div ke kanan, gunakan position:absolute dengan sifat yang betul sebaliknya:
1 2 |
|
Ingat untuk menetapkan juga kedudukan elemen induk kepada relatif:
1 |
|
Pendekatan ini memastikan elemen kekal pada kedudukan mutlak di tepi kanan induknya sambil mengekalkan kedudukannya dalam aliran dokumen.
Atas ialah kandungan terperinci Mengapa Float:right Berhenti Berfungsi Apabila Memohon Jawatan:mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Muat naik fail dengan multer di node.js dan ekspres

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)
