Mengapa Kecerunan Latar Belakang Hilang Apabila Menggunakan Elemen Berkedudukan Benar?

Memahami Kehilangan Kecerunan Latar Belakang dengan Kedudukan Mutlak

Apabila menggunakan kedudukan mutlak pada elemen, adalah penting untuk memastikan terdapat ruang yang mencukupi untuknya dalam bekasnya . Dalam keadaan ini, isu timbul apabila ketinggian elemen badan tidak mencukupi untuk menampung pengepala yang diposisikan secara mutlak.

Pengepala, pada mulanya diletakkan pada titik tengah skrin menggunakan bahagian atas: 50% dan kiri: 50% , mengaburkan kecerunan latar belakang. Ini berlaku kerana pengepala diletakkan di atas kecerunan, mengakibatkan kehilangannya.

Menyelesaikan Isu: Memberi Ketinggian kepada Badan

Untuk menangani masalah ini, adalah penting untuk menyediakan ketinggian kepada elemen badan. Dengan memperkenalkan ketinggian min: 100vh dalam CSS, anda menjamin bahawa badan memanjang ke ketinggian penuh port pandangan. Ini memastikan bahawa terdapat ruang yang mencukupi untuk pengepala diposisikan sepenuhnya tanpa mengganggu kecerunan latar belakang.

Berikut ialah kod dikemas kini yang menyelesaikan isu:

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

Dengan pengubahsuaian ini, latar belakang kecerunan akan kekal kelihatan walaupun dengan kedudukan pengepala secara mutlak. Kaedah ini memastikan pemusatan pengepala yang dikehendaki dan pengekalan kecerunan.

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