Bagaimanakah `clip-path` Memberi Impak Susunan Susunan Elemen dalam CSS?

Cara Clip-Path Mempengaruhi Susunan Susunan Elemen dalam DOM

Clip-path ialah sifat CSS yang mencipta kawasan keratan, menentukan bahagian kandungan unsur yang boleh dilihat. Walau bagaimanapun, ia mempunyai kesan yang tidak dijangka pada susunan susun, meletakkan elemen kemudian dalam DOM di bawah yang mempunyai laluan klip.

Punca Masalah

Ini berlaku kerana , mengikut spesifikasi CSS, menggunakan nilai laluan klip bukan sifar mencipta konteks tindanan. Konteks tindanan ialah ruang tiga dimensi di mana unsur-unsur dipaparkan dan berlapis mengikut indeks-znya.

Dalam kes laluan klip, unsur dengan laluan klip diletakkan dalam konteks tindanan baharu , dan elemen seterusnya tanpa kedudukan yang jelas dipaparkan dalam konteks tindanan asal. Ini bermakna elemen dengan laluan klip akan bertindih dengan elemen tanpa kedudukan yang jelas walaupun ia muncul kemudian dalam DOM.

Membetulkan Isu

Untuk menyelesaikan isu ini, anda boleh menetapkan secara eksplisit kedudukan elemen dengan laluan klip kepada "relatif" atau "mutlak", yang memindahkannya ke konteks tindanan baharu yang dicipta oleh laluan klip. Ini akan memastikan bahawa elemen kemudian dalam DOM kekal di atas elemen dengan laluan klip.

Contoh

Pertimbangkan kod CSS berikut:

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

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
}

Pada mulanya, imej tersembunyi di belakang pengepala disebabkan oleh laluan klip pada pengepala. Dengan menetapkan "kedudukan: relatif" pada imej, ia bergerak ke konteks tindanan yang sama seperti pengepala dan muncul di atasnya:

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

Kesimpulan

Menggunakan klip -path mencipta konteks tindanan yang mempengaruhi susunan susunan unsur-unsur berikutnya. Untuk memastikan pelapisan yang betul, tetapkan secara eksplisit kedudukan elemen dengan laluan klip kepada "relatif" atau "mutlak" atau pertimbangkan untuk menggunakan teknik lain untuk mengawal pertindihan elemen.

Atas ialah kandungan terperinci Bagaimanakah `clip-path` Memberi Impak Susunan Susunan Elemen dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!