Mengapa Kandungan CSS Bertindih Tetapi Bukan Latar Belakang?

Kandungan Bertindih tetapi Latar Belakang Tidak

Dalam CSS, susunan lukisan elemen mengikut hierarki tertentu. Apabila elemen bertindih yang lain, kandungan elemen bertindih dipaparkan di atas. Walau bagaimanapun, latar belakang elemen bertindih tidak terjejas. Sebaliknya, ia kekal pada kedudukan asalnya.

Untuk memahami gelagat ini, adalah penting untuk merujuk kepada [dokumentasi pesanan cat W3C](https://www.w3.org/TR/css-backgrounds-3 /#the-painting-order). Ia menggariskan tertib berikut:

1. Warna latar belakang elemen induk
2. Imej latar belakang elemen induk
3. Kandungan elemen anak (tidak termasuk latar belakang dan sempadan)
4. Warna latar belakang elemen kanak-kanak
5. Imej latar belakang kanak-kanak elemen
6. Sempadan elemen kanak-kanak

Dalam kod yang anda berikan, latar belakang elemen ".box" dicat di titik 4. Latar belakang elemen ".bottom" juga dicat pada titik 4. Walau bagaimanapun, kandungan unsur ".bottom" (teks) tidak dicat sehingga titik 3 elemen bersarang seterusnya (iaitu unsur akar dalam ini case).

Oleh itu, kandungan elemen ".bottom" nampaknya berada di hadapan latar belakang elemen ".box" kerana teks dicat selepas latar belakang elemen ".box" tetapi sebelum latar belakang elemen ".bottom".

Untuk mengubah suai gelagat ini, anda boleh menggunakan kelegapan rendah pada elemen ".bottom", yang akan meletakkan kandungannya dalam susunan susunan sebelum latar belakang dan sempadan elemen ".box".

Atas ialah kandungan terperinci Mengapa Kandungan CSS Bertindih Tetapi Bukan Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!