Layout CSS - Atribut position

position Aturan properti digunakan untuk menentukan jenis metode penempatan elemen (static, relative, fixed, absolute atau sticky).

properti position

position Properti ini menentukan tipe metode penempatan yang digunakan untuk elemen.

Terdapat lima nilai posisi yang berbeda:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Elemen sebenarnya menggunakan properti top, bottom, left, dan right untuk menempatkan diri sendiri. Namun, kecuali properti position diatur terlebih dahulu, properti ini tidak akan berfungsi. Menurut nilai position yang berbeda, cara kerjanya juga berbeda.

position: static;

Pada halaman HTML, elemen bawaan adalah tipe penempatan static (statis).

Elemen yang ditempatkan statis tidak terpengaruh oleh properti top, bottom, left, dan right.

Elemen yang ditempatkan statis tidak akan ditempatkan secara khusus; ia selalu menempatkan diri sendiri berdasarkan aliran normal halaman:

Element <div> ini mengatur 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 dari posisi normal mereka.

Menetapkan properti top, right, bottom, dan left elemen yang ditempatkan relatif akan mengakibatkan elemen tersebut berada di posisi yang biasanya dan disesuaikan untuk menyesuaikan dengan ruang yang disisih elemen.

Element <div> ini mengatur 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 ditempatkan di viewport, yang berarti bahkan saat halaman digulir, ia selalu berada di tempat yang sama. Properti top, right, bottom, dan left digunakan untuk menempatkan elemen ini.

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

Perhatikan elemen tetap di pojok 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

Element <div> ini mengatur position: fixed;

position: absolute;

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

Namun, jika elemen yang ditempatkan absolut tidak memiliki nenek moyang, ia akan menggunakan dokumen utama (body), dan bergerak bersama halaman saat halaman menggulir.

Perhatian:Elemen yang 'ditempatkan' adalah posisi mereka kecuali static selain elemen lainnya.

Ini adalah contoh sederhana:

Element <div> ini mengatur position: relative;
Element <div> ini mengatur 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 menempatkan berdasarkan posisi gerakan pengguna.

elemen lepas kaku menempatkan berdasarkan posisi gerakan pengguna.relative) dan lepas kaku (fixed) untuk berubah. Awalnya ia akan berada di posisi relatif, sampai ia mendapatkan posisi offset yang diberikan di dalam viewport - lalu ia 'dilepas kaku' di posisi yang sesuai (contoh: position:fixed).

Perhatian:Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung penempatan lepas kaku. Safari memerlukan awalan -webkit- (lihat contoh di bawah). Anda juga harus setidaknya menentukan top,right,bottom atau left salah satu, supaya penempatan lepas kaku 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 menempel

Saat menempatkan elemen, mereka dapat menempel dengan elemen lain.

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

Elemen dapat diatur urutan tumpukan yang positif atau negatif:

Ini adalah judul

Karena 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 lebih tinggi selalu berada di depan elemen dengan urutan tumpukan yang lebih rendah.

Perhatian:jika dua elemen yang dialokasikan menempel tanpa disebutkan z-indexjika ada dua elemen yang dialokasikan yang menempel tanpa disebutkan, elemen yang terakhir di kode HTML akan muncul di atas.

penempatan teks di gambar yang dialokasikan

Bagaimana menempatkan teks di gambar:

contoh

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

Coba sendiri:

Kiri Atas Kanan Atas Kiri Bawah Kanan Bawah Tengah

contoh lainnya

atur bentuk elemen
Contoh ini menunjukkan bagaimana mengatur bentuk elemen. Elemen di potong untuk bentuk ini dan ditampilkan.

semua properti CSS penempatan

properti deskripsi
bottom atur margin bawah luar tebal kotak lokasi.
clip Potong elemen penempatan absolut.
left Atur luar tebing kiri kotak penempatan.
position Tentukan jenis penempatan elemen.
right Atur luar tebing kanan kotak penempatan.
top Atur luar tebing atas kotak penempatan.
z-index Atur urutan pemunculan elemen.

Bacaan lanjutan

Buku pelengkap:Ringkasan penempatan CSS

Buku pelengkap:Penempatan relatif CSS

Buku pelengkap:Penempatan absolut CSS