Mengapakah `clip-path` Mengubah Susunan Susunan Elemen HTML?

Mengapa Clip-Path Mengubah Suai Susunan Susunan: Penyelaman Lebih Dalam

Dalam dunia CSS, kita sering berurusan dengan susunan unsur-unsur , di mana elemen diletakkan lebih jauh dalam kod biasanya dilukis di atas yang diletakkan di bawah. Walau bagaimanapun, sifat tertentu, seperti laluan klip, boleh mengganggu susunan susunan yang dijangka ini, membawa kepada hasil yang tidak dijangka.

Pertimbangkan kod CSS berikut:

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

Apabila digunakan pada tajuk (

), kod ini mentakrifkan bentuk tersuai menggunakan laluan klip. Walau bagaimanapun, jika imej diletakkan di bawah tajuk ini, kami menghadapi gelagat yang tidak dijangka. Imej, yang sepatutnya muncul secara visual di atas pengepala kerana kedudukannya yang kemudian dalam kod, berakhir di bawahnya.

Untuk memahami gelagat ini, kita mesti memahami bahawa laluan klip, serupa dengan kelegapan CSS, mewujudkan konteks susun baru. Dalam susunan lukisan yang ditakrifkan oleh CSS, elemen yang mencipta konteks tindanan diletakkan sebelum elemen tidak diposisikan.

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

 - All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
 - All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
 - All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

Dalam contoh kami, elemen dengan sifat laluan klip dilukis dalam langkah 8, manakala imej , yang tidak mempunyai sebarang kedudukan, dicat dalam langkah 4. Walaupun muncul kemudian dalam kod, imej itu dicat sebelum pengepala terpotong kerana konteks susunan yang dicipta oleh clip-path.

Untuk membetulkannya, seseorang boleh mentakrifkan position:relative pada imej dengan jelas. Ini meletakkan imej, menyebabkan ia diletakkan dalam konteks tindanan yang sama seperti pengepala terpotong. Tertib pepohon kemudiannya menentukan bahawa imej dipaparkan di atas pengepala.

img {
  margin-top: -10em;
  position:relative;
}

Kesimpulannya, laluan klip, seperti kelegapan CSS, mewujudkan konteks tindanan, yang mempengaruhi susunan lukisan unsur. Dengan memahami konsep ini, kita boleh mengawal gelagat menyusun dan mencapai hasil visual yang diingini.

Atas ialah kandungan terperinci Mengapakah `clip-path` Mengubah Susunan Susunan Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!