Position Static, Relative, Absolute, Fix Pada CSS Layouting

Position Static, Relative, Absolute, Fix Pada CSS Layouting – Property CSS Position ini akan sangat membantu kita, ketika kita ingin mengatur tata letak setiap kotak elemen HTML yang ingin kita tampilkan pada halaman website sesuai dengan posisi yang kita mau. Elemen HTML yang diberikan Property CSS Position ini, akan memiliki perilaku Out Of Flow atau keluar dari jalur perilaku normal elemen HTML defaultnya. Untuk memindahkan posisi atau letak suatu kotak elemen HTML, kalau kita refresh dari artikel saya yang menjelaskan mengenai ‘Box Model’, kita bisa saja menggunakan salah satu property box model yaitu ‘margin’. Penggunaan property css ‘margin’ memungkinkan kita memindahkan elemen sesuai dengan yang kita mau. Namun property tersebut akan membuat elemen HTML yang berada setelahnya juga akan ikut berpindah/bergeser. Hal tersebut terjadi karena memang perilaku dari elemen HTML yang diberikan property css margin, akan mempengaruhi elemen HTML disekitarnya. Hal tersebutlah alasan kenapa kita membutuhkan Property CSS Position sebagai bagian dari Konsep CSS Layout. Dengan menggunakan Property CSS Position kita bisa mengatur sebuah kotak elemen HTML tanpa harus mempengaruhi kotak elemen HTML disekitarnya, dengan syarat kita paham nilai yang dimiliki oleh Property CSS Position. Nilai atau value dari Property CSS Position ini memiliki 4 value, yaitu sebagai berikut :

1. Static
Ketika kita tidak sama sekali memberikan property css position ini pada sebuah elemen HTML, itu artinya elemen HTML tersebut memiliki nilai default property css position, yaitu static. Karena Static adalah nilai default dari tiap-tiap elemen HTML ketika tidak diberi properti css position.

Menggunakan nilai propety css position selain static ( non-static ), akan membuat sebuah elemen seolah olah berada pada dimensi yang berbeda dari elemen lainnya, atau berada di dimensi lainnya.

Elemen yang diberi nilai property position selain static ( non-static ) dapat memiliki akses untuk menggunakan property css seperti top, left, bottom, dan right untuk mengatur posisinya atau tata letaknya.

Contoh penggunaan sintak property css position static, perhatikan kotak 2 yang diberikan nilai property position static, tidak akan mengalami perubahan posisi atau letak sama sekali :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Position Static</title>
 <style>
  .kotak1 {
   width: 200px;
   height: 200px;
   background-color: red;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: brown;
   position: static;
  }
  .kotak3 {
   width: 200px;
   height: 200px;
   background-color: black;
  }
 </style>
</head>
<body>
  <div class="kotak1">Kotak 1</div>
  <div class="kotak2">Kotak 2</div>
  <div class="kotak3">Kotak 3</div> 
</body>

2. Relative

<style>
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: violet;
   position: relative;
  }
</style>

menjelaskan position dengan nilai relative dan static

Position CSS Static & Relative

Penjelasan gambar di atas :

a = Kotak 2 setelah diberikan nilai property css position static. Maka posisinya tidak akan berubah terhadap posisi awalnya. Perhatikan juga gambar ini juga akan sama dengan nilai property position relative yang diberikan pada kotak 2. Sepertinya tidak ada yang berbeda baik hasil static atau relative. Namun keduanya menghasilkan posisi yang berbeda. Lihat perbedaan di kotak di bawahnya. Gambar b, c, d, dan e ilustrasi yang mengibaratkan gambar a adalah sebuah bidang 3 dimensi. Gambar b dan c adalah ilustrasi untuk menjelaskan gambar bidang 3 dimensi yang diberi nilai property css static. Gambar d dan e adalah ilustrasi untuk menjelaskan gambar bidang 3 dimensi yang diberi nilai property relative. Tapi contoh ini, bukan berarti untuk sintak di atas kita membuat sebuah bidang 3 dimensi. Gambar b, c, d, dan e hanya sebuah ilustrasi untuk memperjelas perbedaan hasil dari nilai static dan relative.

b = Bayangkan gambar a adalah ilustrasi sebuah bidang 3 dimensi yang diberi nilai property position static, sama seperti gambar a, yang letaknya secara vertikal.

c = Gambar c untuk memperjelas point di gambar b. Ketika bidang 3 dimensi itu dirubah posisinya, maka baru jelas bahwa property css position static, tidak merubah posisi dari kotak 2 (violet). Posisinya tetap berada di antara kotak 1 (light green) dan kotak 3 (gold)

d = Bayangkan a adalah ilustrasi sebuah bidang 3 dimensi yang diberi nilai property position relative. Terlihat bahwa kotak 2 agak sedikit menonjol ke atas, akibat dari dari nilai property position relative.

e = Gambar e memperjelas point di gambar d. Ketika bidang 3 dimensi tersebut dirubah posisinya, maka baru jelas bahwa property css position relative, membuat kotak 2 (violet) naik satu dimensi di atas kotak 1 (light green) dan kotak 3 (gold).

Noted :

Untuk melihat hasil perbedaan nilai property position css baik nilai static atau relatif seperti penjelasan di atas, silakan kunjungi link https://www.tinkercard.com untuk melakukan ilustrasi permodelan 3 dimensinya.

● Penjelasan gambar tersebut semoga bisa menjelaskan bagaimana prinsip kerja nilai dari position static dan relative. Untuk perilaku dari sebuah kotak elemen HTML yang diberikan nilai property css position relative ada beberapa point yang perlu dicatat. Perhatikan sintak dibawah, dan gambar tampilan di browsernya:

● Ketika kita menggerakkan suatu elemen HTML dengan posisi relatif, maka akan membuat elemen HTML tersebut berperilaku Out Of Flow atau keluar dari perilaku normalnya, yang mengakibatkan kotak elemen HTML tersebut keluar dari dimensi asalnya 1 tingkat. Karena sudah keluar dimensi asalnya atau sudah memiliki dimensi sendiri, maka kita punya akses untuk menggunakan properti top, left, bottom, right.

● Dimensi ruang yang awalnya ditempati oleh kotak elemen HTML tersebut, masih ada. Ruang ini kosong, tapi karena di anggap masih ada, maka tidak membuat elemen kotak setelahnya untuk berpindah menempatinya.

● Ketika kita menggerakkan sebuah kotak elemen HTML dengan posisi relatif, maka elemen kotak tersebut akan bergerak relatif terhadap posisi semulanya.

● Karena elemen kotak HTML tersebut bergerak terhadap posisi awalnya, maka jika kita memberi properti top: 0; left: 0; maka elemen tersebut tidak berubah posisinya keatas.

● Biasanya kita memakai value/nilai property css position relatif ini, hanya ketika kita mau membuat satu kotak elemen HTML maju satu dimensi saja atau membuatnya Out Of Flow. Jarang kita mengatur berapa nilai property css top, left, bottom, dan right. Biasanya untuk mengatur nilai tersebut, akan banyak dilakukan ketika kita menggunakan nilai property css position absolute.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Position Relative</title>
 <style>
  .kotak1 {
   width: 200px;
   height: 200px;
   background-color: lightgreen;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: violet;
   position: relative;
   top: 30px;
   left: 50px;
  }
  .kotak3 {
   width: 200px;
   height: 200px;
   background-color: gold;
  }
 </style>
</head>
<body>
  <div class="kotak1">Kotak 1</div>
  <div class="kotak2">Kotak 2</div>
  <div class="kotak3">Kotak 3</div> 
</body>

menjelaskan property css relatif dan hasilnya pada elemen HTML

Property CSS Position Relative

3. Absolute

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Position Absolute</title>
 <style>
  .kotak1 {
   width: 200px;
   height: 200px;
   background-color: lightgreen;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: violet;
   position: absolute;
  }
  .kotak3 {
   width: 200px;
   height: 200px;
   background-color: gold;
  }
 </style>
</head>
<body>
  <div class="kotak1">Kotak 1</div>
  <div class="kotak2">Kotak 2</div>
  <div class="kotak3">Kotak 3</div> 
</body>

menjelaskan penggunaan property css absolute dan menunjukkan hasilnya

Property CSS Position Absolute

Gambar diatas menjelaskan tampilan di browser, ketika kotak 2 (violet) diberi property css position absolute, maka kotak 2 (violet) akan bergerak atau bergeser satu dimensi dari posisi asalnya. Ketika property css position bernilai absolute, maka posisi awal dari kotak 2 ( violet ) dianggap tidak ada. Maka dari itu kotak 3 ( gold ) naik menempatinya. Sehingga apabila kita lihat pada tampilan browser, seakan kotak 3 ( gold ) tidak ada, padahal kotak 3 ( gold ) berada dibawah kotak 2 ( violet ). Tampilan ini akan lebih jelas apabila dilihat pada ilustrasi 3 dimensinya.

Berikut konsep atau point-point yang perlu dicatat ketika kita menggunakan property css position dengan nilai absolute:

● Ketika kita menggerakkan elemen dengan posisi absolute maka kita memiliki akses untuk menggunakan properti top, left, bottom, dan right.

● Ruang atau posisi awal yang ditempati oleh kotak elemen HTML yang diberi nilai property css position absolute dianggap tidak ada.

● Ketika kita menggerakkan sebuah kotak elemen HTML dengan nilai posisi absolute, maka elemen kotak tersebut akan bergerak relatif terhadap posisi dari element parentnya, selama elemen parentnya memiliki posisi yang juga Non Static. jadi element parentnya harus dibuat perilakunya Out Of Flow juga atau keluar dari flow perilaku normalnya. Parent yang dimaksud disini adalah parent terdekatnya. Karena biasanya kalau kita membuat sebuah halaman website, terkadang banyak tag <div> yang bersarang.

● Jika kita memberi properti css top: 0; left: 0;, maka kotak elemen HTML yang diberi property position css dengan nilai absolute, maka posisinya akan berada diujung kiri atas elemen parentnya.

Untuk lebih jelas terhadap konsep diatas silakan lihat contoh dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Position Absolute</title>
 <style>
  .container {
   width: 700px;
   height: 700px;
   margin: 0 auto;
   border: 10px solid olive;
   position: relative;
  }
  .container div{
   margin: 0 auto;
  }
  .kotak1 {
   width: 200px;
   height: 200px;
   background-color: lightgreen;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: violet;
   position: absolute;
   top: 0;
  }
  .kotak3 {
   width: 200px;
   height: 200px;
   background-color: gold;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="kotak1">Kotak 1</div>
  <div class="kotak2">Kotak 2</div>
  <div class="kotak3">Kotak 3</div> 
 </div>
</body>

menjelaskan bagaimana posisi absolute bekerja sesuai dengan lingkup element parentnya

Property CSS Postion Absolute

Noted: 3 kotak light green, violet, dan ungu berada dalam satu parent yaitu container. Ketika kotak 2 ( violet ) diberi position absolute dengan top:0, maka untuk elemen HTML pembungkusnya, dalam hal ini adalah containernya harus diberi nilai property css position non static juga. karena itu containernya diberi nilai property css position relative. karena elemen HTML yang diberi nilai property css position absolute akan bergerak relatif terhadap elemen parentnya terdekat. Lihat konsep di atas.

4. Fixed

Property CSS Position dengan nilai fixed, memiliki perilaku yang agak mirip dengan property css position absolute. Kenapa begitu?.. karena ketika suatu elemen HTML diberi property css position fixed, maka elemen tersebut akan bergerak relatif terhadap elemen windownya, tanpa mempedulikan elemen parentnya, meskipun elemen parentnya memiliki posisi non static.

Perilaku dari nilai property css position fixed ini, akan terkunci atau tetap ketika kita menggerakkan scroll pada window. Karena itu untuk nilai property css position fixed banya digunakan ketika kita ingin membuat Top Bar atau Footer.

Untuk membuat sebuah dimensi tanpa bidang kita juga bisa memanfaatkan nilai property css position fixed ini. Seperti contohnya iklan overlay yang biasanya menutupi sebagian layar ketika kita membuka pertama kali suatu website yang menampilkan iklan overlay tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Position Fixed</title>
 <style>
  .container {
   width: 700px;
   height: 3000px;
   margin: 0 auto;
   border: 10px solid olive;
   position: relative;
  }
  .container div{
   margin: 0 auto;
  }
  .kotak1 {
   width: 200px;
   height: 200px;
   background-color: lightgreen;
  }
  .kotak2 {
   width: 200px;
   height: 200px;
   background-color: violet;
   position: fixed;
   top:0;
   left: 0;
  
  }
  .kotak3 {
   width: 200px;
   height: 200px;
   background-color: gold;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="kotak1">Kotak 1</div>
  <div class="kotak2">Kotak 2</div>
  <div class="kotak3">Kotak 3</div> 
 </div>
</body>

Contoh Untuk Membuat Top Bar ( elemen kotak 2 ( violet ) dijadikan Top Bar )

<style> 
  .kotak2 {
   height: 50px;
   background-color: violet;
   position: fixed;
   top:0;
   left: 0;
   right: 0;
  }  
</style>

menjelaskan bagaimana menggunakan property css fixed dan hasilnya

Property CSS Position Fiixed

Digitaladies Room

Position Static, Relative, Absolute, Fix Pada CSS Layouting

Post a Comment for "Position Static, Relative, Absolute, Fix Pada CSS Layouting"

Menu Halaman Statis