Apakah syarat yang perlu dipenuhi untuk menggunakan kedudukan mutlak?

Apakah syarat untuk menggunakan kedudukan mutlak? Perlukan contoh kod khusus

Kedudukan mutlak ialah kaedah penentududukan CSS biasa yang membenarkan elemen diposisikan secara relatif kepada bukan statik terdekatnya (iaitu, elemen yang mempunyai nilai atribut kedudukannya selain daripada elemen induk yang diposisikan statik) (termasuk badan). Sebelum menggunakan kedudukan mutlak, kita perlu memahami beberapa syarat penggunaan dan langkah berjaga-jaga.

1. Tetapkan atribut kedudukan elemen induk
   Sebelum menggunakan kedudukan mutlak, kita perlu memastikan bahawa nilai atribut kedudukan elemen induk bukanlah statik lalai, tetapi relatif, mutlak atau tetap. Ini kerana kedudukan mutlak diposisikan secara relatif kepada elemen induk tidak statik yang terdekat Jika tiada elemen induk yang layak, kedudukan mutlak akan diposisikan secara relatif kepada keseluruhan dokumen, yang biasanya bukan hasil yang diingini.

Contoh kod:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

2. Menetapkan atribut kedudukan secara eksplisit
   Selain memerlukan elemen induk untuk menetapkan atribut kedudukan, kita juga perlu menetapkan atribut elemen secara eksplisit untuk diletakkan, menetapkannya kepada mutlak atau tetap. Hanya elemen dengan set atribut kedudukan boleh menggunakan kedudukan mutlak.

Contoh kod:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

3. Nyatakan kaedah penentududukan
   Kedudukan mutlak boleh menentukan jarak dari tepi elemen induk melalui atribut atas, bawah, kiri dan kanan. Kita boleh menggunakan sifat ini untuk memperhalusi kedudukan elemen. Ambil perhatian bahawa nilai atribut kedudukan boleh menjadi nilai piksel tertentu atau nilai peratusan.

Contoh kod:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. Gunakan atribut z-index untuk mengawal perhubungan berlatarkan
   Elemen yang diletakkan secara mutlak mungkin mempunyai hubungan bertindih yang bertindih. Dalam kes ini, anda boleh menggunakan z-index atribut kepada Mengawal susunan paparan elemen. Elemen dengan nilai indeks z yang lebih besar akan menimpa elemen dengan nilai indeks z yang lebih kecil. Sila ambil perhatian bahawa hanya elemen dengan nilai atribut kedudukan relatif, mutlak atau tetap boleh menetapkan atribut indeks-z.

Contoh kod:
HTML:

<div class="parent">
  <div class="child" style="z-index: 1;">Hello World</div>
  <div class="child" style="z-index: 2;">I am on top</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

Ringkasan:
Untuk menggunakan penentududukan mutlak, kita perlu memastikan bahawa elemen induk mempunyai set atribut kedudukan, elemen anak secara eksplisit menetapkan atribut kedudukan dan menentukan atribut kedudukan atas dan bawah , kiri, kanan dan kaedah kedudukan lain. Atribut indeks-z boleh digunakan untuk mengawal perhubungan berlatarkan supaya elemen dipaparkan dalam susunan yang kami jangkakan.

Di atas adalah beberapa syarat dan contoh kod tentang menggunakan kedudukan mutlak saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Apakah syarat yang perlu dipenuhi untuk menggunakan kedudukan mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!