CSS Position

  1. › 
  2. ›  › 
  3. CSS Position

Mengatur posisi elemen dengan CSS

Untuk menentukan letak elemen dengan CSS, salah satu cara yang dapat diterapkan adalah menggunakan properti posisi. Penerapan cara ini melalui 2 tahap berikut ini :

1. Menetapkan sifat elemen.

Menggunakan properti position.
Properti position ini berfungsi untuk menentukan sifat elemen.
Detail value dari properti position: tersebut adalah :
1. static : Bersifat tetap ditempat semula.
2. relative : Bersifat menyesuaikan.
3. fixed : Bersifat permanen ditempat yang ditentukan.
4. absolute : Bersifat mutlak meninggalkan tempat asalnya.
5. sticky : Bersifat menempel.

2. Mengatur posisi elemen.

Elemen yang sifatnya telah ditetapkan memerlukan properti letak untuk mengatur posisinya :

1. top : mengatur posisi elemen ke atas.
2. bottom : mengatur posisi elemen ke bawah.
3. left : mengatur posisi elemen ke kiri.
4. right : mengatur posisi elemen ke kanan.
CATATAN :
Properti letak TIDAK berlaku untuk elemen dengan properti position: static; dimana elemen tersebut bersifat menetap ditempat asalnya.

Cara penggunaan properti position.

1. Position : static

<div>Elemen static</div>

<style>

 div { position: static;}
 
</style>
Elemen static
CATATAN :
Posisi awal (default) setiap elemen HTML adalah static yang berarti tetap.
Sehingga elemen yang diberikan properti static maka posisinya tidak akan berubah.

2. Position : relative

Pada properti position:relative posisi elemen akan tampak normal. Tapi akan berubah posisi setelah diberikan properti letak (top / bottom / left / right).

<div class='kolom1'>Elemen relative</div>
<div class='kolom2'>Elemen relative</div>
<style>
 div { position: relative;}
 div.kolom2 { bottom: -75px; }
</style>
Elemen relative (kolom1)
Elemen relative (kolom2)
Keterangan :

Nilai properti letak (pada contoh diatas adalah bottom) dapat berisi unit ukuran seperti px / em / % (persen) dst.
Dan dapat menggunakan nilai (-) negatif yang berarti berlawanan dengan arah properti letaknya seperti contoh dibawah ini.

Contoh dibawah ini adalah elemen yang sama dengan diatas, hanya mengubah nilai properti negatif menjadi positif. Sehingga letaknya akan berlawanan dengan arah properti letaknya.

<div class='kolom1'>Elemen relative</div>
<div class='kolom2'>Elemen relative</div>
<style>
 div { position: relative;}
 div.kolom2 { bottom: 75px; }
</style>
Elemen relative (kolom1)
Elemen relative (kolom2)
CATATAN :

Nilai negatif pada properti letak akan mengubah posisi elemen berlawanan dengan arah posisi letaknya :
nilai negatif pada properti letak (bottom) bawah maka elemen akan bergeser ke (top) atas
nilai negatif pada properti letak (left) kiri maka elemen akan bergeser ke (right) kanan

3. Position : fixed

PENTING :
Elemen yang diberikan properti position: fixed; akan meninggalkan tempat asalnya tanpa celah.

Perhatikan kedua contoh dibawah ini yang menjelaskan posisi elemen sebelum diberi properti dan setelah diberikan properti position: fixed;

SEBELUM :
<div>Elemen static</div>
<div class='fixed'>Elemen "sebelum" fixed</div>
<div>Elemen static</div>
<style>
 .fixed {}
</style>
Elemen static
Elemen "sebelum" fixed
Elemen static
SESUDAH :
<div>Elemen static</div>
<div class='fixed'>Elemen "setelah" fixed</div>
<div>Elemen static</div>
<style>
 .fixed { position: fixed;}
</style>
Elemen static
Elemen "setelah" fixed
Elemen static
Penjelasan contoh diatas :

Kedua elemen static yang sebelumnya mengapit elemen fixed, seketika menempel satu sama lain setelah nilai properti fixed diterapkan. Inilah yang dimaksud elemen fixed meninggalkan tempat asalnya tanpa celah (*gap).

Setelah elemen posisi elemen ditentukan menjadi fixed, maka letak elemen tidak teratur namun tetap berada diarea viewport sehingga properti letak diperlukan untuk mengatur letak pasti dari elemen fixed tersebut seperti dibawah ini.

<div class='fixed'>Elemen fixed (bottom:0)</div>
Letak asal elemen fixed (bottom:0;left:0)
<style>
 .fixed { 
      position: fixed;
      bottom: 0;
      right: 0;
      }
</style>

Ujicoba

Letak asal elemen fixed (bottom:0;left:0)

Elemen fixed (bottom:0;left:0)
Seperti nama propertinya, fixed yang berarti fix permanen ditempat yang ditentukan. Maka letak elemen ini tidak akan berubah meskipun halaman di scroll.

4. Position : absolute

Posisi absolute hampir mirip dengan posisi fixed, yaitu meninggalkan tempat asalnya tanpa gap (celah). Dan memerlukan properti letak untuk mengatur letak lokasi pastinya.

Tambahan :

Elemen dengan sifat absolute membutuhkan elemen induk yang bersifat relative sebagai bingkai yang menahan lokasi elemen agar tidak meninggalkan posisi awalnya terlalu jauh.

<div class='relative'>
  <div class='absolute'>Elemen absolute</div>
</div>
<div class='absolute'>Elemen absolute tanpa bingkai</div>
<style>
 .relative { position: relative;}
 .absolute { position: absolute; bottom: 0}
</style>
Elemen absolute dalam bingkai

ini adalah elemen induk

(Elemen absolute tanpa bingkai berada dibagian paling bawah halaman, dikarenakan halaman ini bersifat relative.)

Elemen absolute tanpa bingkai
CATATAN :
Elemen posisi fixed dan absolute kehilangan tempat untuk membentangkan dimensinya sehingga ukuran elemen akan menyusut sesuai ukuran konten yang berada didalamnya.
Elemen posisi fixed dan absolute selain memerlukan properti letak untuk memastikan lokasi, kedua elemen ini juga membutuhkan properti width untuk membentangkan dimensinya.
Atau menggunakan 2 properti letak left dan right untuk membentangkan dimensinya.
Contoh pembentangan dimensi / ukuran elemen fixed dan absolute :
<div class='relative'>
  <div class='absolute'>Elemen absolute dalam bingkai</div>
</div>
<style>
.relative { position: relative;}
.absolute { 
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      }
</style>
Elemen absolute

5. Position : sticky

<h3>Ini adalah contoh elemen sticky</h3>
<p>Elemen sticky tampak seperti elemen static, tapi elemen ini akan menempel pada saat halaman web discroll.</p>
<div>Elemen sticky</div>
<p>Elemen sticky pada contoh ini ditetapkan dengan nilai properti top:0;, sehingga apabila scroll halaman mencapai batas teratas maka elemen akan menempel dan tetap berada ditempatnya meskipin halaman discroll.</p> 
<p>Coba scroll halaman didalam kolom ini untuk melihat efek yang ditimbulkan dari properti letak sticky.</p>
<style>
 div { position: sticky; top:0;}
</style>

Ini adalah contoh elemen sticky


Coba scroll halaman didalam kolom ini untuk melihat efek yang ditimbulkan dari properti letak sticky.


Elemen sticky

Elemen sticky tampak seperti elemen static,


tapi elemen ini akan menempel pada saat halaman web discroll.


Elemen sticky pada contoh ini ditetapkan dengan nilai properti top:0;,
sehingga apabila scroll halaman mencapai batas teratas maka elemen akan menempel dan tetap berada ditempatnya meskipin halaman discroll.


*gap berarti celah atau ruang sisa yang berada disekitar elemen.
*gap juga merupakan sebuah properti CSS yang mengatur ukuran celah / ruang kosong disekitar elemen.

Komentar

Posting Komentar