Mengapakah kecerunan linear saya hilang apabila saya menggunakan `position:absolute` pada elemen?

Angular Freak: Menghapuskan Kehilangan Kecerunan dengan Kedudukan:mutlak

Mengapa kecerunan-linear hilang apabila saya menetapkan elemen kepada kedudukan:mutlak?

Senario:

Anda telah mencipta latar belakang kecerunan dan bercita-cita untuk memusatkan blok teks secara mendatar. Berusaha untuk keserasian resolusi silang, anda meletakkan elemen pengepala sebagai mutlak, menggunakan teknik penjajaran yang digunakan secara meluas. Walau bagaimanapun, pengubahsuaian ini membawa kepada kehilangan latar belakang kecerunan yang tidak dijangka.

Analisis:

Kaedah kedudukan yang anda gunakan menolak pengepala keluar daripada aliran dokumen biasa , mengakibatkan latar belakangnya dipotong. Ini kerana ketinggian lalai elemen badan adalah auto, yang membolehkan ia mengecut untuk menampung kandungannya. Akibatnya, tiada bahagian latar belakang meluas ke kawasan di mana pengepala terletak, menjadikannya tidak kelihatan.

Penyelesaian:

Untuk membetulkan isu ini, kita mesti pastikan latar belakang kekal kelihatan walaupun kedudukan pengepala. Ini boleh dicapai dengan melaraskan sifat ketinggian min bagi elemen badan untuk memaksanya mengekalkan ketinggian yang sesuai, menampung kedua-dua pengepala dan latar belakang.

Dengan menentukan ketinggian min: 100vh untuk badan, kami menjamin bahawa ia menjangkau sekurang-kurangnya ketinggian penuh port pandangan. Ini mewujudkan ruang untuk latar belakang kecerunan untuk diduduki, memastikan keterlihatannya sambil mengekalkan penjajaran yang diingini pengepala.

Snippet Kod:

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

Kesimpulan:

Dengan mengubah suai sifat ketinggian min elemen badan, kami membenarkan latar belakang kekal kelihatan sambil mengekalkan kedudukan elemen pengepala yang diingini. Ini secara berkesan menangani masalah latar belakang kecerunan yang hilang, membolehkan kami mencapai matlamat kami untuk pengepala terpusat dengan latar belakang kecerunan yang lancar.

Atas ialah kandungan terperinci Mengapakah kecerunan linear saya hilang apabila saya menggunakan `position:absolute` pada elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!