Rumah > hujung hadapan web > tutorial css > Mengapa Latar Belakang Div Bertindih Saya Muncul di Sebalik Kandungannya?

Mengapa Latar Belakang Div Bertindih Saya Muncul di Sebalik Kandungannya?

Barbara Streisand
Lepaskan: 2024-12-27 19:27:16
asal
588 orang telah melayarinya

Why Does My Overlapping Div's Background Appear Behind Its Content?

Memahami Susunan Lukisan CSS dan Elemen Bertindih

Dalam senario yang diberikan, kami memerhatikan dua div dengan latar belakang yang bercanggah, satu bertindih dengan yang lain. Walau bagaimanapun, div yang bertindih meluncur antara latar belakang dan kandungan div asas disebabkan oleh peraturan susunan lukisan CSS tertentu.

Menurut dokumentasi Pesanan Lukisan CSS W3C, susunan lukisan untuk keturunan unsur dengan konteks tindanan (yang terdapat div bertindih kerana margin negatifnya) adalah sebagai berikut:

  1. Konteks tindanan daripada indeks-z negatif: Pertama, mana-mana unsur kanak-kanak dengan indeks-z negatif membentuk konteks tindanannya sendiri dan dicat dalam tertib menurun.
  2. Kanak-kanak tidak berkedudukan aliran masuk: Seterusnya, semua kanak-kanak peringkat blok tidak berkedudukan dalam aliran (yang termasuk div kedua dalam kes ini) dicat dalam susunan pokok.
  3. Latar belakang dan sempadan kanak-kanak peringkat blok aliran masuk: Dalam setiap kanak-kanak, latar belakang dan sempadan mereka dicat . Latar belakang div yang bertindih dicat pada peringkat ini.
  4. Kanak-kanak sebaris tidak berkedudukan dalam aliran: Selepas melukis semua kanak-kanak peringkat blok, sebarang elemen sebaris dan kandungannya dicat mengikut susunan pokok .
  5. Menyusun konteks daripada indeks-z positif: Akhir sekali, menyusun konteks daripada unsur dengan positif indeks-z dilukis dalam tertib menaik.

Implikasi untuk Elemen Bertindih

Isu khusus dengan div yang bertindih ialah latar belakang div kedua (dari langkah 3) dilukis sebelum kandungan teksnya (dari langkah 4). Ini menyebabkan teks muncul di antara kandungan dan latar belakang div pertama.

Membetulkan Isu

Untuk menyelesaikan isu ini, anda boleh menggunakan salah satu daripada pendekatan berikut:

  • Tetapkan indeks z positif untuk div bertindih: Ini akan memastikan konteks tindanannya dicat selepas latar belakang div pertama.
  • Gunakan kedudukan CSS:relative pada div bertindih: Ini akan mewujudkan konteks tindanan baharu untuk div dan keturunannya, membolehkan anda kawal susunan lukisan menggunakan z-index.
  • Tambahkan lapisan lutsinar di atas pertindihan div: Ini akan mengalihkan kandungan teks dengan berkesan ke lapisan "di atas", memintas latar belakang div yang bertindih.

Atas ialah kandungan terperinci Mengapa Latar Belakang Div Bertindih Saya Muncul di Sebalik Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan