属性 CSS position

Pengertian dan Penggunaan

property position menetapkan jenis penempatan elemen.

Penerangan

Sifat ini menentukan mekanisme pem定位 yang digunakan untuk membangkitkan bentuk elemen. Bila mana-mana elemen boleh ditempatkan, elemen absolut atau tetap akan membangkitkan kubus blok, walau elemen itu sendiri adalah jenis mana-mana. Elemen pem定位 relatif akan dialihkan daripada posisi lalai normalnya di aliran biasa.

Lihat juga:

Panduan CSSPem定位 CSS

Panduan HTML DOMProperti pem定位

Contoh

Pem定位 h2 elemen:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Cuba Sendiri

Syarat CSS

position: static|absolut|tetap|relatif|lekat|awal|warisan;

Nilai sifat

Nilai Penerangan
absolut

Membangkitkan elemen pem定位 absolut, menempatkan berdasarkan bapa pertama yang bukan pem定位 static.

Posisi elemen ditentukan melalui properti "left", "top", "right" dan "bottom".
tetap

Membangkitkan elemen pem定位 absolut, menempatkan berdasarkan tingkap pereka.

Posisi elemen ditentukan melalui properti "left", "top", "right" dan "bottom".
relatif

Membangkitkan elemen pem定位 relatif, menempatkan berdasarkan posisi normalnya di aliran biasa.

Jadi, "left:20" akan menambah 20 piksel ke posisi KIRI elemen.
static Nilai lalai. Tanpa pem定位，elemen muncul di dalam aliran biasa (abaikan top, bottom, left, right atau pengisytiharaan z-index).
warisan Ditentukan supaya nilai properti position diwarisi dari elemen bapa.

Detil teknikal

Nilai lalai: static
Warisan: tidak
Versi: CSS2
Syarat JavaScript: objek.style.position="absolute"

Contoh TIY

Pem定位：定位 relatif
Contoh ini memaparkan bagaimana untuk menempatkan elemen berdasarkan posisi normal elemen.
Pem定位：定位 absolut
Contoh ini memaparkan bagaimana untuk menempatkan elemen menggunakan nilai absolut.
Pem定位：定位 tetap
Contoh ini memaparkan bagaimana untuk menempatkan elemen berdasarkan tingkap pereka.
Menetapkan bentuk elemen
Contoh ini memaparkan bagaimana untuk menetapkan bentuk elemen. Elemen ini disangka di dalam bentuk ini dan dipaparkan.
Z-index
Z-index boleh digunakan untuk menempatkan elemen di belakang elemen lain.
Z-index
Elemen di contoh di atas telah diubah Z-index.

Pemungutan bantuan pereka

Nombor di dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0