Pengertian Position pada CSS
Properti CSS position digunakan untuk menentukan posisi elemen dalam halaman website.
Dengan properti ini, kamu bisa memilih apakah elemen diposisikan sesuai aliran normal halaman (default), atau digeser posisinya.
Kamu juga bisa memposisikannya relatif terhadap elemen lain pada halaman, atau memposisikannya relatif terhadap viewport.
Semua elemen secara default diposisikan “static” pada halaman.
Posisi statis menentukan posisi elemen dalam aliran normal halaman.
Elemen disebut sebagai positioned element jika nilai position diubah dari static menjadi salah satu nilai: relative, absolute, fixed, sticky.
Selain 5 nilai di atas, 2 nilai position baru juga ditambahkan di CSS3: page dan center.
Setelah elemen diposisikan (diberi nilai selain static), posisinya pada halaman ditentukan menggunakan properti offset: top, right, bottom, dan left.
Properti offset hanya berfungsi pada elemen yang diposisikan, jadi pada elemen “static” tidak akan memiliki efek.
Isi Konten
Position: static
Posisi “static” merupakan nilai default elemen HTML.
Elemen dengan posisi static tidak terpengaruh oleh properti offset seperti top, right, bottom, dan left.
Elemen dengan position: static tidak diposisikan secara khusus dan hanya menurut aliran normal dalam halaman.
div {
position: static;
width: 300px;
height: 100px;
left: 32px;
top: 32px;
background: #b9f6ca;
}
left: 32px (tidak memiliki efek)
top: 32px (tidak memiliki efek)
Adipisicing in occaecat sit amet tempor irure dolore ad. Ad labore nostrud officia consectetur non magna aliqua eiusmod consequat. Sunt Lorem quis id amet laboris incididunt. Ad aliquip excepteur ullamco cupidatat ipsum. Est cillum minim ut cupidatat id nisi cillum pariatur esse quis et voluptate. Reprehenderit fugiat sint laboris tempor excepteur adipisicing exercitation reprehenderit quis. Ullamco sit veniam do id sint in cupidatat laboris Lorem elit esse tempor.
Pada contoh di atas, meskipun elemen “static” diberi properti left: 32px dan top: 32px, posisinya tetap tidak bergeser dari tempat aslinya.
Position: relative
Elemen yang diposisikan dengan “relative” (position: relative) menentukan posisi elemen yang didalamnya dan juga menentukan posisinya sendiri.
Sehingga kamu bisa menggeser atau mendorong elemen dari posisi semula menggunakan properti offset (top, right, bottom, left).
Elemen “relative” akan bereaksi terhadap sifat-sifat berikut:
div {
position: relative;
width: 300px;
height: 100px;
left: 32px;
top: 32px;
background: #b9f6ca;
}
left: 32px
top: 32px
Adipisicing in occaecat sit amet tempor irure dolore ad. Ad labore nostrud officia consectetur non magna aliqua eiusmod consequat. Sunt Lorem quis id amet laboris incididunt. Ad aliquip excepteur ullamco cupidatat ipsum. Est cillum minim ut cupidatat id nisi cillum pariatur esse quis et voluptate. Reprehenderit fugiat sint laboris tempor excepteur adipisicing exercitation reprehenderit quis. Ullamco sit veniam do id sint in cupidatat laboris Lorem elit esse tempor.
Perhatikan elemen “div” di atas, setelah diposisikan sebagai relative maka elemen tersebut akan bergeser ke kanan 32px dan ke bawah 16px.
Posisi relative pada elemen yang membuatnya bergeser dari posisi semula tidak berpengaruh pada konten lain pada halaman web.
Sehingga posisi baru elemen relative ini akan bertumpukan dengan elemen lain disekitarnya seperti contoh di atas.
Elemen “relative” juga akan dijadikan sebagai titik acuan elemen lain dengan posisi “absolute”.
Position: absolute
Elemen dengan position: absolute akan memposisikan dirinya terhadap elemen “relative” induk yang terdekat”
Elemen “absolute” akan bereaksi terhadap sifat-sifat berikut:
Posisi kordinat asal elemen “absolute” yaitu kiri atas seperti contoh berikut:
Saya membuat elemen container dengan warna hijau dan diposisikan sebagai elemen “relative”.
Dan di dalam elemen tersebut saya membuat elemen baru dengan warna orange dan diposisikan sebagai elemen “absolute”.
<div class="box__green">
<div class="box__amber">Elemen anak<br>position: absolute</div>
</div>
.box__green {
position: relative;
width: 300px;
height: 200px;
background: #b9f6ca;
}
.box__amber {
position: absolute;
width: 150px;
background: #ffecb3;
}
Sekarang saya akan memindahkan posisi elemen “absolute” dengan menambahkan offset bottom: 16px dan right: 32px
.box__amber {
position: absolute;
width: 150px;
background: #ffecb3;
bottom: 16px;
right: 32px;
}
Dengan menentukan offset pada elemen “absolute”, maka elemen ini juga akan bertumpuk dengan konten lain yang ada di dalam elemen “relative” tanpa mempengaruhi posisi elemen tersebut.
<div class="box__green">
<p>Laboris do pariatur veniam aute esse occaecat. Laborum labore id non minim aliqua non consequat cupidatat quis sunt duis veniam veniam velit. Nisi eu duis voluptate enim ipsum anim fugiat Lorem pariatur officia. Enim in minim adipisicing commodo. Veniam ex cillum nostrud ea nostrud est ad consectetur velit et et cillum eu elit.</p>
<div class="box__amber">Elemen anak<br>position: absolute</div>
</div>
Position: fixed
Elemen dengan posisi tetap (position: fixed) adalah elemen yang diposisikan relatif terhadap viewport.
Elemen “fixed” ini memiliki perilaku mirip dengan elemen “absolute” yang tidak mengikuti aliran halaman dan tidak berpengaruh pada tata letak elemen lain.
Bedanya, jika elemen “absolute” diposisikan relatif terhadap elemen “relative” induk yang terdekat.
Maka elemen “fixed” ini diposisikan terhadap viewport dan tidak terpengaruh oleh pengguliran.
Menggulirkan halaman ke bawah tidak akan membuat elemen ini menggulir ke atas.
Elemen “fixed” berada di area viewport dan letaknya diatur menggunakan properti offset (top, right, bottom, left).
Penentuan posisi “fixed” biasanya digunakan untuk menjaga elemen tertentu agar selalu terlihat, seperti navigasi menu.
Elemen “fixed” akan bereaksi terhadap sifat-sifat berikut:
Position: sticky
Elemen dengan posisi “sticky” (position: sticky) diposisikan sebagai peralihan dari elemen “relative” dan “fixed”.
Elemen ini diperlakukan sebagai elemen yang relatif sampai pada titik gulir tertentu, setelah itu diperlakukan sebagai elemen “fixed”.
Contoh:
.element {
position: sticky;
top: 70px;
}
Elemen di atas akan berperilaku seperti memiliki posisi relatif sampai viewport mencapai titik gulir yaitu 0px dari atas viewport.
Efek “sticky” ini biasanya dibuat menggunakan JavaScript. Namun setelah nilai “sticky” sudah didukung sebagai nilai properti CSS, kamu bisa membuatnya cukup menggunakan CSS saja.
Satu hal yang harus diingat! kamu perlu menentukan titik “ambang” untuk elemen sticky menggunakan salah satu properti offset (top, right, bottom, left).
Jika titik ambang ini tidak ditentukan, maka efek sticky tidak akan berfungsi. Dan elemen akan berperilaku persis seolah-olah memiliki posisi relatif.