Apakah perbezaan antara kedudukan relatif dan kedudukan mutlak?

Perbezaan ialah: 1. Asas penentududukan, elemen berkedudukan secara relatifnya diposisikan secara relatif kepada kedudukan asalnya, elemen berkedudukan mutlak diposisikan secara relatif kepada elemen induk kedudukan terdekatnya 2. Margin dan padding, Jidar dan padding elemen akan mempengaruhi elemen yang agak kedudukannya, dan margin dan padding elemen tidak akan mempengaruhi elemen yang diposisikan secara mutlak 3. Indeks z sesuatu elemen tidak akan mempengaruhi elemen yang agak kedudukannya, tetapi indeks z sesuatu elemen akan. Elemen yang diletakkan secara mutlak.

Sistem pengendalian untuk tutorial ini: sistem Windows 10, komputer Dell G3.

Kedudukan relatif dan kedudukan mutlak ialah kedua-dua kaedah penentududukan dalam CSS yang membolehkan anda mengalihkan elemen daripada kedudukan lalainya ke kedudukan berbeza. Walau bagaimanapun, terdapat beberapa perbezaan utama antara mereka:

Kedudukan Relatif

* Elemen yang agak berkedudukan diposisikan berbanding dengan kedudukan asalnya.

* Jidar dan pelapik sesuatu elemen mempengaruhi elemen kedudukan yang agak.

* Indeks z sesuatu unsur tidak mempengaruhi unsur yang agak kedudukannya.

Kedudukan mutlak

* Elemen kedudukan mutlak diposisikan berbanding dengan elemen induk kedudukan terdekatnya.

* Jidar elemen dan pelapik tidak menjejaskan elemen yang diletakkan secara mutlak.

* Indeks z sesuatu elemen mempengaruhi elemen yang diposisikan secara mutlak.

Berikut ialah perbezaan khusus antara kedudukan relatif dan kedudukan mutlak:

Asas kedudukanKedudukan asal unsurElemen induk# kedudukan terdekat bagi unsur induk#🎜 ##🎜🎜 #Margin dan padding akan menjejaskan kedudukan elemen tidak akan menjejaskan kedudukan elemen #🎜🎜 #z Indeks tidak akan menjejaskan kedudukan elemen akan menjejaskan kedudukan elemen Latar belakang elemen Tidak akan menjejaskan kedudukan elemen Akan menjejaskan kedudukan elemen

Attribute	relative positioning	🎜🎜🎜#🎜🎜🎜#🎜🎜 🎜🎜#
#🎜 🎜#
#🎜🎜 #Saiz elemen	tidak akan menjejaskan kedudukan elemen	akan menjejaskan kedudukan elemen #🎜 🎜#
Bayang-bayang elemen	tidak menjejaskan kedudukan elemen	tidak menjejaskan kedudukan elemen

Contoh kedudukan relatif

<div class="container">
  <div class="box">
    <p>这是一个相对定位的元素。它相对于其原始位置向右移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: relative;
  left: 100px;
}

yang secara relatifnya akan mengandungi kod elemen ini. Elemen yang agak kedudukannya akan dialihkan 100 piksel ke kanan.

Contoh Kedudukan Mutlak

<div class="container">
  <div class="box">
    <p>这是一个绝对定位的元素。它相对于其最近的定位父元素向下移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 100px;
}

Kod ini akan mencipta bekas yang mengandungi elemen kedudukan mutlak. Elemen yang diposisikan secara mutlak akan bergerak ke bawah 100 piksel.

Dalam penggunaan sebenar, anda boleh memilih kedudukan relatif atau kedudukan mutlak mengikut keperluan anda. Kedudukan relatif ialah pilihan yang baik jika anda hanya perlu mengalihkan elemen daripada kedudukan lalainya ke lokasi lain. Jika anda perlu meletakkan elemen ke lokasi tertentu, kedudukan mutlak ialah pilihan yang lebih baik.

Atas ialah kandungan terperinci Apakah perbezaan antara kedudukan relatif dan kedudukan mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!