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 tepat

Kadangkala, 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>

Dalam kod di atas, dengan menetapkan atribut kedudukan elemen kontena kepada relatif, elemen kotak diposisikan secara relatif kepada elemen bekas. Kemudian letakkan elemen kotak di tengah-tengah elemen bekas dengan menetapkan atribut atas dan kirinya. . Pada masa ini, kita boleh mencapai ini dengan menetapkan atribut z-index. Berikut ialah contoh dua elemen div yang mencapai kesan melata melalui kedudukan mutlak:

1. <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>

Dalam kod di atas, atribut kedudukan elemen box1 dan box2 ditetapkan kepada mutlak, dan kedudukannya ditentukan melalui atribut atas dan kiri . Kemudian dengan menetapkan atribut indeks-z bagi elemen box2 kepada 2, letakkannya di atas elemen box1 untuk mencapai kesan melata.

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!