Bagaimanakah `kedudukan: mutlak` dan `kedudukan: tetap` Berbeza dalam Penentududukan HTML/CSS?

Elemen Kedudukan Tetap Berbanding Induk atau Tetingkap

Dalam HTML dan CSS, terdapat dua cara utama untuk meletakkan elemen: relatif kepada induk atau relatif kepada tingkap.

Elemen Kedudukan Tetap Berbanding dengan Induk

Untuk meletakkan elemen tetap relatif kepada elemen induk, gunakan sifat CSS berikut:

position: absolute;

Apabila elemen diletakkan mutlak, kedudukannya ditentukan secara relatif kepada serta-merta mengandungi unsur induk. Contohnya:

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 50px;
  top: 20px;
}

Dalam contoh ini, elemen anak akan diletakkan 50 piksel dari kiri dan 20 piksel dari bahagian atas elemen induk.

Elemen Kedudukan Tetap Berkaitan dengan Tetingkap

Untuk meletakkan elemen tetap berbanding tetingkap, gunakan CSS berikut harta:

position: fixed;

Apabila sesuatu elemen diposisikan tetap, kedudukannya ditentukan secara relatif kepada port pandangan. Contohnya:

#my-element {
  position: fixed;
  right: 0;
  top: 120px;
}

Dalam contoh ini, elemen saya akan diletakkan 120 piksel dari atas dan 0 piksel dari sebelah kanan port pandangan.

Atas ialah kandungan terperinci Bagaimanakah `kedudukan: mutlak` dan `kedudukan: tetap` Berbeza dalam Penentududukan HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!