Perbedaan Relative dan Absolute Position dalam CSS

April 14th, 2012

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.

absolute-relative position - javaziez

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

Semoga bermanfaat, terima kasih :)

This entry was posted on Saturday, April 14th, 2012 at 04:33 and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

12 Responses to “Perbedaan Relative dan Absolute Position dalam CSS”

  1. Josiane Says:

    Вот это вставьте в папку css:#page { -moz-background-clip: border; -moz-background-origin: pdndiag; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url( ); background-position: center top; background-repeat: no-repeat;}

  2. Ricardo Says:

    так уже было в теме, я только картинку заменилвот все что относится к этой картинкев файле индекс.пхпdiv id=”base2″в файле стиля#base2{position:absolute;overflow:hidden;width:950px;margin:0px auto;top:0px;background:url(‘images/bg_footer.jpg’) no-repeat bottom right;}

  3. alif Says:

    its clear now :)
    thank you

  4. javaziez Says:

    You’re welcome :)

  5. Matius Nugroho Says:

    saya bingung ni, basic nya membuat dua dan tiga kolom tu gimana sih? saya sudah main2 dengan float:right ataupun left, tp kolomnya masih berantakan juga, kadang2 juga keluar dari div penampungnya, mohon bimbingan, karena saya memang lemah designing, hehe

  6. javaziez Says:

    sudah menggunakan property “clear” setelah menggunakan element float? baiknya tampilkan dulu kode html dan css-nya disini. biar kita bisa bahas sama2 :)

  7. Matius Nugroho Says:

    tag nya seperti ini,

    Testing

    x

    Content here

    Content here

    dan berikut cssnya :)
    @charset “utf-8″;
    .welcome {
    font-family: Georgia, “Times New Roman”, Times, serif;
    color: #454545;
    background:#00adfa;
    text-decoration: none;
    padding: 5px;
    width: 445px;
    margin:10% auto;
    }
    .kav {
    text-decoration: none;
    position:relative;
    background:#454545
    text-align: justify;
    padding: 5px;
    min-height:10px;
    }
    .blok {
    background-color: #ccc;
    padding: 5px;
    float: left;
    width: 210px;

    }

  8. javaziez Says:

    dr smua codingan css mas, gk ada yg dipakai di kode hmtl-nya. munkin kita lihat dulu aja artikel ini :
    http://javaziez.com/membuat-template-website-dengan-css-bagian-1/

    disitu dicontohkan pembuatan dua ruas element html menggunakan css. nanti kita bahas di artikel sana ya :)

  9. Matius Nugroho Says:

    tagnya udah saya ketik tadi, cuma gak nampil di komennya, hahaha

    x

    Content here

    Content here

  10. bella Says:

    info menarik kang. makasi ya.

  11. Yanuar Lukman Arif Says:

    Artikel yang sangat bermanfaat gan, Sekarang Saya jadi Mengerti perbedaan antara Relative dan Absolute!! Semoga Semakin Sukses

  12. Web Says:

    saya sebenarnya sudah mempelajari position pada CSS namun saya jarang berlatih dalam hal CSS jadi saya selalu lupa apa yang pernah saya pelajari namun saya belajar lagi dari blog anda dan dapat pencerahan, dengan penjelasan yang singkat namun jelas.. semoga saya tidak lupa lagi heheh

Leave a Reply

*