Layout CSS - Properti position

position Pengaturan sifat digunakan untuk jenis metode penempatan elemen (static, relative, fixed, absolute atau sticky).

Atribut position

position Atribut menentukan jenis metode penempatan yang digunakan untuk elemen.

Terdapat lima nilai posisi yang berbeda:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Elemen sebenarnya menggunakan atribut top, bottom, left dan right untuk menempatkan. Tetapi, kecuali jika atribut position diterapkan terlebih dahulu, atribut ini tidak akan berfungsi. Cara kerja mereka berbeda menurut nilai position yang berbeda.

position: static;

Pada situasi baku, cara penempatan elemen HTML adalah statis (statik).

Elemen yang diletakkan statis tidak terpengaruh oleh atribut top, bottom, left dan right.

Elemen yang diatur dengan position: static; tidak akan diletakkan dengan cara khusus apapun; ia selalu berada di posisi yang normal berdasarkan aliran halaman:

Elemen <div> ini diatur dengan position: static;

Ini adalah CSS yang digunakan:

contoh

div.static {
  position: static;
  border: 3px solid #73AD21;
}

coba sendiri

position: relative;

position: relative; elemen berada di posisi yang bersangkutan terhadap posisi normalnya.

Menetapkan atribut top, right, bottom dan left elemen penempatan yang bersangkutan akan menyebabkan elemen tersebut bergerak ke posisi normal untuk mengatur. Tidak akan mengatur konten lain untuk menyesuaikan ruang yang disisih oleh elemen.

Elemen <div> ini diatur dengan position: relative;

Ini adalah CSS yang digunakan:

contoh

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

coba sendiri

position: fixed;

position: fixed; Elemen yang diletakkan di viewport adalah elemen yang berada di tempat yang sama, artinya bahkan saat halaman digerakkan, ia selalu berada di tempat yang sama. Attribut top, right, bottom dan left digunakan untuk menempatkan elemen ini.

Elemen yang diletakkan tetap tidak akan meninggalkan ruang di tempat yang biasanya harus disisih di halaman.

Perhatikan elemen tetap di kanan bawah halaman ini. Ini adalah CSS yang digunakan:

contoh

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

coba sendiri

Elemen <div> ini diatur dengan position: fixed;

position: absolute;

position: absolute; elemen berada di posisi yang bersangkutan terhadap elemen penempatan yang paling dekat (tidak seperti di viewport, seperti fixed).

Namun, jika elemen yang diletakkan absolut tidak memiliki leluhur, ia akan menggunakan badan dokumen (body) dan bergerak bersama halaman saat halaman digerakkan.

perhatian:Elemen 'terletak' adalah posisi elemen kecuali static untuk elemen mana pun lainnya.

Ini adalah contoh sederhana:

Elemen <div> ini diatur dengan position: relative;
Elemen <div> ini diatur dengan position: absolute;

Ini adalah CSS yang digunakan:

contoh

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

coba sendiri

position: sticky;

position: sticky; elemen yang menempatkan berdasarkan posisi gerakan pengguna.

elemen lepas kancing menempatkan berdasarkan posisi gerakan pengguna.relative) dan tetap (fixed) untuk berubah. Pada awalnya ia akan berada di lokasi relatif, sampai ia menemui posisi offset yang diberikan di dalam viewport - lalu ia 'dilepas' di posisi yang sesuai (seperti position:fixed).

perhatian:Internet Explorer, Edge 15 dan versi yang lebih awal tidak mendukung lokasi lepas kancing. Safari memerlukan awalan -webkit- (lihat contoh di bawah). Anda juga harus setidaknya menentukan top,right,bottom atau left satu, supaya lokasi lepas kancing berfungsi.

dalam contoh ini, elemen sticky akan tinggal di atas halaman saat mencapai posisi gerakan (top: 0)

contoh

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

coba sendiri

elemen yang menimbulkan gangguan

saat menempatkan elemen, mereka dapat menimbulkan gangguan dengan elemen lain.

z-index sifat menentukan urutan tumpukan elemen (elemen mana yang harus ditempatkan di depan atau di belakang elemen lain).

elemen dapat diatur urutan tumpukan positif atau negatif:

ini adalah judul

kerana z-index gambar adalah -1, jadi ia berada di belakang teks.

contoh

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

coba sendiri

elemen dengan urutan tumpukan yang tinggi selalu berada di depan elemen dengan urutan tumpukan yang rendah.

perhatian:jika dua elemen yang ditempatkan menimbulkan gangguan tanpa disebutkan z-indexjika kedua elemen yang ditempatkan menimbulkan gangguan tanpa disebutkan, elemen yang terakhir di HTML kode akan muncul di atas.

lokasi teks di dalam gambar

Bagaimana menempatkan teks di gambar:

contoh

Logo CodeW3C.com
Kiri Bawah
Kiri Atas
Kanan Atas
Kanan Bawah
Diseuskendalikan

Coba sendiri:

Kiri Atas Kanan Atas Kiri Bawah Kanan Bawah Diseuskendalikan

contoh lebih banyak

tetapkan bentuk elemen
contoh ini memperlihatkan bagaimana mengatur bentuk elemen. Elemen disangkut dalam bentuk ini dan ditampilkan.

semua sifat lokasi CSS

sifat deskripsi
bottom tetapkan sempadan luar pinggir bawah kotak lokasi.
clip Memotong elemen penempatan absolut.
left Tetapkan sempadan marjin kiri kotak penempatan.
position Tentukan jenis penempatan elemen.
right Tetapkan sempadan marjin kanan kotak penempatan.
top Tetapkan sempadan marjin luar kiri kotak penempatan.
z-index Tetapkan urutan pemindahan elemen.

Bacaan lanjut

Buku tambahan:Ringkasan penempatan CSS

Buku tambahan:Penempatan relatif CSS

Buku tambahan:Penempatan absolut CSS