Adakah anda biasa dengan lima kaedah kedudukan mutlak yang biasa ini?

Lima kaedah penentududukan mutlak yang biasa, adakah anda tahu kesemuanya?

Kedudukan mutlak ialah kaedah penentududukan yang biasa digunakan dalam CSS, yang membolehkan sesuatu elemen diposisikan secara relatif kepada elemen nenek moyang kedudukan terdekatnya. Dalam artikel ini, kami akan membincangkan lima cara biasa kedudukan mutlak dan memberikan contoh kod khusus untuk setiap satu.

1. kedudukan atas, kanan, bawah, kiri

Kaedah kedudukan mutlak yang paling biasa ialah menggunakan atribut atas, kanan, bawah dan kiri untuk elemen kedudukan. Dengan menentukan nilai sifat ini, kita boleh mengawal kedudukan elemen berbanding dengan elemen induknya.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; right: 10px;">我在右上角</div>
</div>

Kod di atas akan meletakkan elemen div kedua di penjuru kanan sebelah atas elemen induknya, 10 piksel dari atas dan kanan.

2. Peratusan kedudukan

Selain menggunakan nilai piksel tertentu, kami juga boleh menggunakan peratusan untuk meletakkan elemen. Kedudukan peratusan adalah relatif kepada lebar dan ketinggian elemen induk. Sebagai contoh, kita boleh menggunakan 50% untuk memusatkan elemen secara mendatar.

<div style="position: relative;">
  <div style="position: absolute; left: 50%;">我水平居中</div>
</div>

Kod di atas akan meletakkan elemen div kedua secara mendatar berpusat pada elemen induknya.

3. Kedudukan mengimbangi

Kedudukan mengimbangi adalah untuk meletakkan elemen dengan menentukan offsetnya daripada kedudukan asalnya. Kita boleh menggunakan nilai negatif untuk menggerakkan elemen ke atas atau ke kiri, dan nilai positif untuk menggerakkan elemen ke bawah atau ke kanan.

<div style="position: relative;">
  <div style="position: absolute; top: -20px; left: -20px;">我向上和向左偏移了</div>
</div>

Kod di atas akan mengalihkan elemen div kedua ke atas dan ke kiri sebanyak 20 piksel.

4. Kedudukan tindanan

Kedudukan tindanan merujuk kepada mengawal susunan susunan elemen dengan menyatakan atribut indeks-z bagi elemen. Semakin besar nilai indeks-z sesuatu elemen, semakin tinggi ia dipaparkan.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px; z-index: 1;">我在上面</div>
  <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">我在下面</div>
</div>

Kod di atas akan memaparkan elemen div kedua di atas elemen div pertama.

5. Kedudukan tetap

Kedudukan tetap bermakna elemen diposisikan secara relatif kepada kedudukan tetingkap penyemak imbas Tidak kira bagaimana bar skrol bergerak, elemen akan kekal dalam kedudukan tetap.

<div style="position: fixed; top: 10px; right: 10px;">我固定在右上角</div>

Kod di atas akan menyematkan elemen ke penjuru kanan sebelah atas tetingkap penyemak imbas.

Dengan menguasai lima kaedah penentududukan mutlak yang biasa ini, kami boleh mengawal dan susun atur elemen dalam halaman web dengan lebih fleksibel. Saya harap artikel ini dapat membantu anda memahami dan menggunakan kedudukan mutlak CSS.

Atas ialah kandungan terperinci Adakah anda biasa dengan lima kaedah kedudukan mutlak yang biasa ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!