Mengapa margin negatif tidak berkuatkuasa dalam beberapa kes? Bagaimana menyelesaikan masalah ini?

Punca dan penyelesaian untuk kegagalan margin negatif CSS

Dalam susun atur laman web, margin negatif sering digunakan untuk mencapai kesan khas seperti pertindihan elemen. Walau bagaimanapun, kadang -kadang gagal dan artikel ini akan menganalisis sebab -sebabnya dan menyediakan penyelesaian.

Kajian kes

Katakan susun atur yang mengandungi bekas utama (utama) dan dua elemen kanak -kanak (Blue Div dan Pink Div). Bekas utama mempunyai lebar 100%, Blue Div adalah 200px, cuba gunakan margin-right: -200px untuk bertindih div biru dengan Div Pink.

Apabila lebar bekas utama adalah 100%, kesan tumpang tindih tidak muncul; Tetapi apabila lebar bekas utama dikurangkan kepada 70%, margin negatif berkuatkuasa dan kedua -dua div bertindih.

Punca dan penyelesaian

Masalahnya ialah lebar sebenar div biru. Oleh kerana penetapan sempadan atau padding, lebar sebenar div biru melebihi 200px. Sebagai contoh, jika sempadan adalah 1px, lebar sebenar ialah 202px (200px 2px).

margin-right: -200px tidak dapat mengimbangi lebar sebenar melebihi 200px, mengakibatkan kegagalan kesan bertindih.

Penyelesaian: Kirakan dan tetapkan margin negatif dengan tepat. Ukur lebar sebenar div biru (termasuk sempadan dan margin dalaman) dan tetapkan nilai margin-right kepada nilai negatif lebar sebenar. Sebagai contoh, jika lebar sebenar adalah 202px, maka margin-right: -202px harus ditetapkan.

Melalui pengiraan yang tepat, ia memastikan bahawa margin negatif dapat mengimbangi lebar sebenar elemen, dengan itu mencapai kesan susun atur yang diharapkan. Di samping itu, adalah disyorkan untuk menggunakan alat pemaju penyemak imbas untuk memeriksa saiz sebenar elemen untuk memastikan ketepatan nilai margin negatif.

Atas ialah kandungan terperinci Mengapa margin negatif tidak berkuatkuasa dalam beberapa kes? Bagaimana menyelesaikan masalah ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!