Bagaimanakah Div Berkedudukan Benar-Benar Mempengaruhi Ketinggian Kontena Induknya?

Kesan Div Kedudukan Mutlak pada Ketinggian Induk

Apabila bekerja dengan CSS, adalah penting untuk mempertimbangkan cara kedudukan elemen mempengaruhi elemen sekelilingnya. Satu cabaran biasa ialah memastikan bahawa div yang diposisikan secara mutlak tidak mengabaikan elemen lain dalam bekas induknya.

Pertimbangkan kod HTML dan CSS berikut:

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

Matlamatnya ialah untuk meletakkan child2 sebelum child1, terutamanya pada peranti mudah alih di mana navigasi harus berada di bahagian bawah. Walau bagaimanapun, child2 mempunyai ketinggian dinamik, yang bermaksud menetapkan ketinggian tetap untuk div induk bukan pilihan.

Malangnya, memandangkan elemen yang diposisikan secara mutlak dialih keluar daripada aliran, ia diabaikan oleh elemen lain dalam induk bekas. Menetapkan limpahan:tersembunyi pada div induk atau menggunakan Clearfix tidak akan membantu.

Penyelesaian

Seperti yang diiktiraf dalam penyataan masalah, penyelesaiannya terletak pada pemahaman yang benar-benar elemen kedudukan dikeluarkan daripada aliran. Oleh itu, adalah tidak mungkin untuk menetapkan ketinggian ibu bapa berdasarkan elemen kedudukan mutlak.

Pilihan untuk Dipertimbangkan:

• Ketinggian tetap: Berikan ketinggian tetap kepada kedua-dua elemen kanak-kanak untuk memastikan betul susun atur.
• JavaScript: Libatkan JavaScript untuk melaraskan kedudukan div secara dinamik berdasarkan ketinggian child2.
• Kotak fleksibel CSS atau susun atur grid: Ini teknik CSS yang lebih baharu membolehkan anda membalikkan susunan visual elemen HTML dalam bekas induk tanpa menggunakan mutlak kedudukan.

Atas ialah kandungan terperinci Bagaimanakah Div Berkedudukan Benar-Benar Mempengaruhi Ketinggian Kontena Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!