Mengapa Latar Belakang Kecerunan Saya Hilang Apabila Menggunakan Kedudukan Mutlak?

Kecerunan Menghilang dengan Kedudukan Mutlak: Satu Resolusi

Dalam siasatan teknikal ini, kami cuba memahami sebab latar belakang kecerunan linear hilang apabila elemen diletakkan secara mutlak. Matlamatnya ialah untuk mencipta pengepala berpusat yang kekal di tengah-tengah port pandangan, tanpa mengira peleraian skrin.

Coretan kod yang disediakan mempamerkan isu tersebut. Apabila pengepala diberi kedudukan mutlak, latar belakang kecerunan hilang. Ini kerana elemen dialih keluar daripada aliran biasa dokumen, meninggalkan latar belakang.

Untuk menyelesaikan isu ini, anda perlu menambahkan sedikit ketinggian pada elemen badan. Ini akan memaksa latar belakang untuk dipaparkan dengan betul, menjadikannya kelihatan walaupun pengepala diposisikan secara mutlak. Kod CSS yang diubah suai disediakan di bawah:

<code class="CSS">body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}</code>

Dengan menambahkan ketinggian min: 100vh, kami memastikan bahawa badan mempunyai ketinggian yang sama dengan ketinggian viewport. Ini memastikan bahawa latar belakang kecerunan meliputi keseluruhan port pandangan, tanpa mengira saiz pengepala.

Dengan pengubahsuaian ini, pengepala kini akan dipusatkan secara menegak dan mendatar dalam port pandangan, walaupun pada resolusi skrin yang berbeza. Kecerunan latar belakang juga akan kelihatan dan merentangi keseluruhan port pandangan.

Atas ialah kandungan terperinci Mengapa Latar Belakang Kecerunan Saya Hilang Apabila Menggunakan Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!