Mengapa Latar Belakang Elemen Bertindih Muncul di Sebalik Kandungan?

Kandungan Tidak Dilindungi oleh Latar Belakang Elemen Bertindih

Percanggahan ini timbul kerana susunan pemaparan komponen CSS yang berbeza. Elemen HTML dipaparkan dalam urutan berikut:

1. Latar belakang dan sempadan elemen induk
2. Latar belakang dan sempadan elemen kanak-kanak
3. Kandungan elemen kanak-kanak

Dalam contoh yang diberikan, div kedua mempunyai margin atas negatif yang digunakan, menyebabkan ia bertindih dengan div pertama Walau bagaimanapun, disebabkan oleh susunan pemaparan yang dinyatakan di atas, latar belakang div kedua dicat di bawah kandungan div pertama.

Untuk menjelaskannya, susunan bersarang dan reka letak elemen individu mempengaruhi output visual. Kandungan diletakkan di atas latar belakang kerana kepentingan teks yang dirasakan. Susunan keutamaan ini boleh diperhatikan dalam senario yang lebih rumit:

body {
  background: pink;
}

div {
  background: red;
  border: 3px solid brown;
  margin-bottom: -20px;
}

Tertib pemaparan untuk contoh ini adalah seperti berikut:

1. Latar belakang
2. Latar belakang dan sempadan pertama
3. Kandungan
   pertama
4. Latar belakang dan sempadan
   kedua
5. Kandungan
   kedua

   Walau bagaimanapun, dengan menetapkan kedudukan: relatif kepada elemen, kita boleh mengubah suai tingkah laku ini. Tindakan ini mencipta konteks tindanan baharu, membolehkan kami mengawal peletakan elemen menggunakan indeks-z. Mekanisme ini memungkinkan untuk meletakkan elemen secara visual dalam susunan yang dikehendaki, tanpa mengira struktur HTML.

   Adalah penting untuk ambil perhatian bahawa fenomena ini tidak intuitif. Walau bagaimanapun, dengan memahami susunan pemaparan CSS, kami boleh menjangka dan mengawal kesan visual ini.