Atribut position CSS

Definisi dan penggunaan

Atribut position menentukan tipe penempatan elemen.

Keterangan

Atribut ini menentukan mekanisme penempatan yang digunakan untuk mengatur tata letak elemen. Setiap elemen dapat diposisikan, tetapi elemen absolut atau fixed akan menghasilkan kotak blok, tidak peduli tipe elemen yang ada sendiri. Elemen yang memposisikan relatif akan digeser terhadap posisi normalnya di alur normal.

Lihat Juga:

Pelajaran CSS:Posisi CSS

Panduan HTML DOM:Atribut posisi

Contoh

Memposisi elemen h2:

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

Coba Sendiri

Syntaks CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

Nilai atribut

Nilai Deskripsi
absolute

Membuat elemen yang memposisikan absolut, memposisikan terhadap elemen induk pertama yang bukan posisi static.

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

Membuat elemen yang memposisikan absolut, memposisikan terhadap jendela browser.

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

Membuat elemen yang memposisikan relatif, memposisikan terhadap posisi normalnya.

Jadi, "left:20" akan menambah 20 pixel ke posisi KIRI elemen.
static Nilai Default. Tanpa penempatan, elemen muncul di dalam alur normal (abaikan top, bottom, left, right atau pernyataan z-index).
inherit Ditetapkan supaya nilai properti position diwarisi dari elemen induk.

Detil Teknologi

Nilai Default: static
Inheritsi: no
Versi: CSS2
Syntaks JavaScript: object.style.position="absolute"

TIY Contoh

Posisi: Posisi Relatif
Contoh ini menunjukkan bagaimana memposisikan elemen terhadap posisi normal elemen.
Posisi: Posisi Absolut
Contoh ini menunjukkan bagaimana menggunakan nilai absolut untuk memposisikan elemen.
Posisi: Posisi Tetap
Contoh ini menunjukkan bagaimana mengatur posisi elemen terhadap jendela browser.
Atur bentuk elemen
Contoh ini menunjukkan bagaimana mengatur bentuk elemen. Elemen ini disangkut ke bentuk ini dan ditampilkan.
Z-index
Z-index dapat digunakan untuk menempatkan elemen di belakang elemen lain.
Z-index
Elemen di contoh di atas telah diubah Z-index.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

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