Perbedaan Positioning Relative & Absolute

Selamat Datang Di Blog Kami :)

Oke sekarang mimin akan memberitahukan apa perbedaan Positioning Relative & Absolute .

Pernah melihat kode CSS seperti ini “position: relative;” ? Ya, “Position” merupakan salah satu property CSS yang memiliki dua nilai yang sering digunakan, yaitu “Absolute” dan “Relative”. Lalu apa perbedaannya? Ok, kita langsung saja buat contohnya dengan membuat dua buah file “index.html” dan “style.css” yang disimpan dalam sebuah folder yang sama. Berikut kodenya :

index.html :

<html>

<head>
<title>
Relative dan Absolute Position
</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="header">
<div id="judul">
Judul Website
</div>
</div>

</body>
</html>

style.css :

#header
{
margin: 0 auto;
width: 900px;
height: 150px;
background-color: #4682B4;
}

#judul
{
font-size: 34px;
color: #F5DEB3;

position : relative;
top: 70px;
left: 20px;
}

Kita jelaskan setiap kodenya.

Kita buat sebuah selector ID dengan nama “header”. Masih ingat dengan sebuah selector? Silahkan baca artikel Perbedaan Selector ID dan Class dalam CSS. Selector “header ini kita akan membuat sebuah header website berbentuk persegi panjang, berikut kodenya :

#header
{
  margin: 0 auto;
  width: 900px;
  height: 150px;
  background-color: #4682B4;
}

Disini kita akan fokus ke property “position”, jadi kita tidak membahas detail kode di atas. Penjelasan rincinya, dapat kita lihat pada artikel selanjutnya setelah ini. Oke, kita jelaskan singkat dari kode ini. “margin: 0 auto;” memberikan kotak/header berada ditengah layar sebelah atas browser, dimana width dan height-nya adalah 900px dan 150px. Kita berikan warna latar “background-color” seperti di atas.

Penempatan ID header pada “index.html” dapat dilihat di sini :

<div id="header">
  <div id="judul">
    Judul Website
  </div>
</div>

Di dalam div ID “header” terdapat ID “judul”. Nah, inilah element yang akan kita berikan property CSS “position”. position yang diberikan adalah relative. Berikut kode CSS-nya :

#judul
{
   font-size: 34px;
   color: #F5DEB3;

   position : relative;
   top: 70px;
   left: 20px;
}

Sebelumnya kita berikan ukuran dan warna font dari “judul” tersebut dengan nilai di atas. Setelahnya kita berikan position “relative”.

Perlu diketahui sebelumnya, posisi element dalam CSS terdapat dua macam, relative dan absolute. Relative merupakan posisi yang dimiliki element dimana letak penempatannya berpatokan kepada element yang menampungnya, dalam hal ini adalah ID “header”. Kalau dilihat, ada kode top dan left. Top adalah jarak atas element (judul) terhadap element penampungnya (header). Left adalah jarak samping kiri element (judul) terhadap element penampungnya (header). Maka hasilnya ID “judul” akan berada di kiri bawah dalam kotak “header” (bisa dilihat di gambar hasil template). Lalu bagaimana dengan absolute? Perbedaannya, posisi absolute letak penempatannya berpatokan kepada layar browser atau pojok kiri atas browser. Jadi jika kode di atas kita ubah posisition-nya menjadi “absolute”, maka ID “judul” akan keluar dari kotak ID “header” dan berada di sebelah kiri “header”, silahkan dicoba. Agar lebih jelasnya, kita lihat gambar dimana perbedaan titik pusat (koordinat 0,0 ) kedua posisition tersebut.

Sudah jelas dengan penjelasan di atas? Silahkan berikan komentar untuk masukan, saran, atau pertanyaan mengenai position relative dan absolute.

Semoga bermanfaat, terima kasih :)