Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Dalam membuat website layout, CSS position property punya peran penting untuk merancang layout seperti yang kita inginkan. Kombinasi antara CSS position property dengan kode CSS lainnya dimanfaatkan untuk menempatkan elemen tertentu di dalam layout. Sekilas konsep dari CSS position tampak sederhana dan mudah untuk dimengerti bagi pemula, namun faktanya justru sebaliknya menjadi hal yang rumit. Padahal keberhasilan memahaminya sangat membantu si designer. Namun untuk membantu memahami CSS position property ini sebelumnya perlu memahami CSS Box Model pada artikel sebelumnya. Pada tutorial ini saya akan membahas beberapa property yang digunakan dalam CSS position.

Illustration by Intraktive

 

CSS position dibagi menjadi empat property :

  • Static
  • Relative
  • Absolute
  • Fixed

Position : Static

position : static adalah posisi default setiap elemen HTML yang ada. Jadi tanpa harus kita nyatakan suatu elemen dengan position : static secara otomatis elemen tersebut adalah position : static. Lalu bagaimana prilaku dari elemen dengan position : static ? Mari kita lihat contoh di bawah ini.

 
 <div class="kotak1"></div>
 <div class="kotak2"></div>
 <div class="kotak3"></div>
.kotak1 { 
	position: static;
	width: 150px;
	height: 150px;
	background: #ee3e64;
}
.kotak2 { 
	position: static;
	width: 150px;
	height: 150px;
	background: #44accf;
}
.kotak3 { 
	position: static;
	width: 150px;
	height: 150px;
	background: #b7d84b;
}

 

Gambar 1

 

Pada gambar di atas kita bisa melihat 3 kotak dengan position : static, maka kotak-kotak ini akan disusun bertumpuk (normal flow). Bila kita menambahkan kotak ke-4, maka kotak tersebut akan diletakkan di posisi terbawah di bawah kotak3 (kotak biru). Adapun kotak1 (kotak orange) akan merapat ke titik origin (0,0) dari containing block . Pada (Gambar 1) di atas, containing blocknya adalah viewport dari browser itu sendiri.

 

Gambar 2

Pada (Gambar 2) di atas ketiga kotak berada dalam satu kotak besar yang ditandai garis biru. Pada kasus ini maka containing block bagi 3 kotak tersebut bukan lagi browser viewport tapi kotak besar dengan garis biru, dengan demikian titik origin (0,0) tidak lagi pada browser viewport tapi beralih ke kotak dengan garis biru. Containing block bertindak sebagai parent/ancestor bagi 3 kotak tersebut. Penting diingat bila ingin menggeser elemen dengan position : static property top, bottom, left, right tidak berlaku. Untuk itu menggunakan property margin-top, margin-bottom, margin-left, margin-right.

 

Position : Relative

Elemen dengan position : relative berarti elemen tersebut diposisikan relatif terhadap posisi normalnya. Apakah yang dimaksud posisi normal tersebut ? kita akan melihat contoh berikut.

.kotak1 { 
width: 150px;
height: 150px;
background: #ee3e64;
}

.kotak2 {
width: 150px;
height: 150px;
background: #44accf;
}

.kotak3 {
width: 150px;
height: 150px;
background: #b7d84b;
}

 

Gambar 3

 

Pada (Gambar 3) di atas tampak 3 kotak yang belum kita kenakan property position apapun. 3 kotak tersebut bertumpuk secara berurutan dari atas ke bawah. Masing - masing kotak berada pada posisi normal mereka atau istilahnya 3 kotak tersebut mengikuti normal flow.

Berikut kode CSS untuk kotak2 kita ubah :

.kotak2 { 
   position: relative;
   width: 150px;
   height: 150px;
   top: 50px;
   left: 20px;
   background: #44accf;
 }

 

Gambar 4

Pada (Gambar 4) di atas kita akan mengenakan propertyposition : relative pada kotak2 (merah), lalu mencoba menggeser kotak tersebut dengan propertytop : 50px dan left : 20px. Ilustasinya bisa dilihat di (Gambar 4), tampak kotak2 bergeser ke bawah 50px dan geser ke kanan 20px. Kotak2 yang bergeser ini tampak overlap dengan elemen lainnya yakni kotak3 (biru). Artinya elemen dengan position : relative bila dikenakan property top, bottom, left, right hanya akan mempengaruhi elemen yang bersangkutan, elemen lain disekitarnya tidak terpengaruh yakni tetap pada posisinya.

Dari mana posisi awal pergeseran tersebut terjadi ? seperti bisa dilihat pada (Gambar 4) posisi awalnya adalah posisi saat kotak sebelum digeser yang di tandai garis hijau putus - putus. Sehingga position : relative bisa diartikan dengan relatif terhadap posisi awal sebelum bergeser.

 

Position : Absolute

Elemen dengan position : absolute berarti elemen tersebut dikeluarkan dari normal flownya, lalu kita bisa menempatkan elemen tersebut ke posisi mana yang kita inginkan menggunakan property top, bottom, left, right. Mari kita lihat contoh di bawah ini.

.kotak1 {
    width: 150px;
    height: 150px;
    background: #ee3e64;
}
.kotak2 {
    width: 150px;
    height: 150px;
    background: #44accf;
}
.kotak3 {
    width: 150px;
    height: 150px;
    background: #b7d84b;
}

 

Gambar 5

Pada (Gambar 5) di atas ketiga kotak tidak kita berikan property position apapun. Terlihat bahwa masing - masing kotak mengikuti normal flownya, bertumpuk dari atas ke bawah sesuai urutan.

Pada contoh di bawah ini kita akan merubah position property kotak2 (merah) menjadi position : absolute.

 .kotak1 {
     width: 150px;
     height: 150px;
     background: #ee3e64;
}
.kotak2 {
     position: absolute;
     top: 20px;
     left: 20px;
     width: 150px;
     height: 150px;
     background: #44accf;
}
.kotak3 {
    width: 150px;
    height: 150px;
    background: #b7d84b;
}

Gambar 6

Pada (Gambar 5) di atas kita kenakan position : absolute pada kotak2 (merah), dan kita berikan propertytop : 40px, left : 40px. Apa yang terjadi pada kotak2 tersebut? yang terjadi adalah kotak2 keluar dari normal flownya bergeser ke atas menuju ke titik origin dari containing block dalam hal ini browser viewport. Selanjutnya titik ini akan menjadi titik acuan bagi kotak2 ini akan diposiisikan dimana. Dengan dikenakan property top : 40px, left : 40px maka kotak2 akan bergeser 40px ke bawah dan 40px ke kanan dihitung dari titik originnya. Selanjutnya dengan bergesernya kotak2 ke atas maka akan meninggalkan ruang kosong yang tadinya di tempati kotak2. Ruang kosong ini kemudian diisi oleh kotak3 (biru) yang ada persis di bawah kotak2.

 

Position : Fixed

Elemen yang dikenakan position : fixed diposisikan relatif terhadap browser viewport. Maksud dari istilah fixed adalah elemen ini tetap pada posisi yang sama walaupun kita melakukan scroll pada halaman web. Pada contoh di bawah ini kita membuat elemen dengan position : fixed yang sering dipakai untuk header di halaman web.

Berikut contohnya