Posisi - Trik CSS | CSS Almanak 2025

The positionproperti dapat membantu Anda memanipulasi lokasi elemen, misalnya:

.element ( position: relative; top: 20px; )

Sehubungan dengan posisi aslinya, elemen di atas sekarang akan didorong ke bawah dari atas sebesar 20px. Jika kita menganimasikan properti ini, kita dapat melihat seberapa besar kontrol yang diberikan kepada kita (meskipun ini bukan ide yang baik untuk alasan kinerja):

relativehanya satu dari enam nilai positionproperti. Ini yang lainnya:

Nilai

static: setiap elemen memiliki posisi statis secara default, sehingga elemen tersebut akan tetap mengikuti alur halaman normal. Jadi jika ada himpunan kiri / kanan / atas / bawah / z-indeks maka tidak akan ada efek pada elemen itu.
relative: posisi asli sebuah elemen tetap berada dalam alur dokumen, seperti staticnilainya. Tapi sekarang indeks kiri / kanan / atas / bawah / z-index akan bekerja. Properti posisi "mendorong" elemen dari posisi semula ke arah itu.
absolute: elemen dihapus dari aliran dokumen dan elemen lainnya akan berperilaku seolah-olah tidak ada di sana sementara semua properti posisi lainnya akan mengerjakannya.
fixed: elemen dihapus dari aliran dokumen seperti elemen yang diposisikan secara mutlak. Nyatanya mereka berperilaku hampir sama, hanya elemen dengan posisi tetap yang selalu relatif terhadap dokumen, bukan induk tertentu, dan tidak terpengaruh oleh scroll.
sticky(percobaan): elemen diperlakukan seperti relativenilai hingga lokasi gulir area pandang mencapai ambang yang ditentukan, di mana elemen mengambil fixedposisi yang diperintahkan untuk tetap.
inherit: positionnilai tidak menurun, jadi ini bisa digunakan untuk memaksanya secara khusus, dan inheritnilai pemosisian dari induknya.

Mutlak

Jika elemen anak memiliki absolutenilai maka elemen induk akan berperilaku seolah-olah anak tersebut tidak ada sama sekali:

.element ( position: absolute; )

Dan ketika kita mencoba untuk mengatur nilai-nilai lain seperti left, bottom, dan rightkita akan menemukan bahwa elemen anak merespon untuk tidak dimensi induknya, tetapi dokumen:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Untuk membuat elemen anak diposisikan secara mutlak dari elemen induknya, kita perlu menyetel ini pada elemen induk itu sendiri:

.parent ( position: relative; )

Sekarang properti seperti left, right, bottomdan topakan mengacu pada elemen induk, sehingga jika kita membuat elemen anak transparan kita bisa melihatnya duduk tepat di bagian bawah induk:

Tetap

The fixednilai adalah sama absolutekarena dapat membantu Anda memposisikan elemen mana saja relatif terhadap dokumen, namun nilai ini tidak terpengaruh oleh bergulir. Lihat elemen turunan pada demo di bawah ini dan bagaimana, setelah Anda menggulir, elemen itu terus menempel ke bagian bawah halaman:

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome	Firefox	YAITU	Tepi	Safari
4	2	7	12	3.1

Ponsel / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Lengket

The stickynilai seperti kompromi antara relativedan fixednilai-nilai. Saat tulisan ini dibuat, nilai tersebut saat ini merupakan nilai eksperimental, yang berarti nilai tersebut bukan bagian dari spesifikasi resmi dan hanya diadopsi sebagian oleh browser tertentu. Dengan kata lain, mungkin bukan ide terbaik untuk menggunakan ini di situs web produksi langsung.

Apa fungsinya? Nah, ini memungkinkan Anda untuk memposisikan elemen relatif terhadap apa pun di dokumen dan kemudian, setelah pengguna menggulir melewati titik tertentu di viewport, perbaiki posisi elemen ke lokasi itu sehingga tetap ditampilkan seperti elemen dengan fixednilai.

Ambil contoh berikut:

.element ( position: sticky; top: 50px; )

Elemen akan diposisikan secara relatif hingga lokasi gulir area pandang mencapai titik di mana elemen akan berada 50pxdari atas area pandang. Pada saat itu, elemen menjadi melekat dan tetap berada di fixedposisi 50pxatas layar.

Demo berikut mengilustrasikan titik itu, di mana navigasi atas adalah relativepemosisian default dan navigasi kedua diatur ke stickydi bagian paling atas viewport. Harap dicatat bahwa demo hanya akan berfungsi di Chrome, Safari dan Opera pada saat penulisan ini.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.