Rumah >hujung hadapan web >tutorial css >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:
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:
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.
Atas ialah kandungan terperinci Mengapa Latar Belakang Elemen Bertindih Muncul di Sebalik Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!