Rumah > Artikel > hujung hadapan web > Letakkan dengan tepat dan cipta kesan melata menggunakan elemen yang diposisikan secara mutlak
. Keperluan ini selalunya boleh dicapai melalui kedudukan mutlak CSS. Artikel ini akan memperkenalkan cara menggunakan elemen berkedudukan mutlak untuk mencapai kedudukan elemen yang tepat dan kesan melata serta menyediakan beberapa contoh kod khusus.
Kedudukan mutlak ialah kaedah penentududukan dalam CSS yang meletakkan elemen berbanding dengan elemen nenek moyang tidak statik yang terdekat. Kita boleh menggunakan atribut atas, bawah, kiri dan kanan untuk menentukan kedudukan elemen dan melaraskan susunan susunan elemen melalui atribut z-index. Di bawah ialah beberapa senario aplikasi biasa dan kod sampel.
Kedudukan yang tepatKadangkala, kita perlu meletakkan elemen dengan tepat ke lokasi yang ditentukan. Berikut ialah contoh meletakkan segi empat sama biru di tengah latar belakang merah:
<style> .container { position: relative; width: 400px; height: 300px; background-color: red; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: blue; } </style> <div class="container"> <div class="box"></div> </div>
<style> .container { position: relative; width: 400px; height: 300px; } .box1 { position: absolute; top: 50px; left: 50px; width: 200px; height: 200px; background-color: red; z-index: 1; } .box2 { position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; background-color: blue; z-index: 2; } </style> <div class="container"> <div class="box1"></div> <div class="box2"></div> </div>
Ringkasnya, menggunakan elemen yang diposisikan secara mutlak boleh mencapai kedudukan elemen yang tepat dan kesan susunan. Dengan menetapkan sifat atas, bawah, kiri dan kanan, kita boleh meletakkan elemen dengan tepat. Dengan menetapkan atribut indeks-z, kita boleh melaraskan susunan susunan elemen. Teknik ini boleh membantu kami mengawal reka letak dan persembahan elemen dalam reka bentuk dan pembangunan web dengan lebih tepat.
Atas ialah kandungan terperinci Letakkan dengan tepat dan cipta kesan melata menggunakan elemen yang diposisikan secara mutlak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!