Mengapa Laluan Klip Mempengaruhi Susunan Susunan Elemen?

Mengapa Susunan Susun Berubah dengan laluan klip

Apabila elemen mempunyai laluan klip digunakan, ia mewujudkan konteks tindanan baharu, sama seperti cara kelegapan mempengaruhi susunan tindanan dengan nilai kurang daripada 1. Ini dinyatakan dalam spesifikasi CSS, yang menyatakan bahawa "Nilai yang dikira selain daripada tiada menghasilkan penciptaan konteks tindanan dengan cara yang sama kelegapan CSS lakukan untuk nilai selain daripada 1."

Tertib tindanan ditentukan semasa mengecat. Langkah-langkah berikut berlaku mengikut tertib:

1. Elemen dengan kedudukan, kelegapan kurang daripada 1 atau mengubah selain daripada tiada mewujudkan konteks tindanan baharu.
2. Keturunan diposisikan dengan indeks-z: auto atau z-index: 0 diletakkan dalam konteks tindanan induk.
3. In-flow, keturunan tidak berkedudukan diletakkan dalam konteks susun induk.

Dalam contoh yang disediakan, elemen dengan laluan klip dilukis dalam langkah 1 dan mencipta konteks tindanan baharu. Elemen imej, yang tidak mempunyai sebarang set kedudukan, akan dicat dalam langkah 3, selepas konteks tindanan yang dicipta oleh elemen laluan klip.

Inilah sebabnya imej muncul di bawah pengepala, walaupun ia muncul kemudian dalam kod DOM.

Penyelesaian:

Untuk menyelesaikan isu ini, anda boleh menetapkan kedudukan: relatif pada elemen imej. Ini akan menyebabkan ia diposisikan secara relatif kepada kedudukan normalnya dan oleh itu ia akan dimasukkan ke dalam konteks tindanan yang dicipta oleh elemen laluan klip dalam langkah 1. Akibatnya, imej akan muncul di atas elemen pengepala.

Contoh Kelegapan:

Tingkah laku yang sama boleh diperhatikan dengan kelegapan. Jika elemen pengepala mempunyai kelegapan kurang daripada 1, ia juga akan mencipta konteks tindanan baharu dan imej akan muncul di bawahnya tanpa sifat kedudukan.

Atas ialah kandungan terperinci Mengapa Laluan Klip Mempengaruhi Susunan Susunan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!