Javaziez

All About Code

Perbedaan Relative dan Absolute Position dalam CSS

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 :)

Incoming search terms:

12 Responses so far.

  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;}

    • 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;}

  2. alif says:

    its clear now :)
    thank you

  3. 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

    • javaziez says:

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

      • 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;

        }

  4. bella says:

    info menarik kang. makasi ya.

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

  6. 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


CAPTCHA Image
*

Subscribe to email feed

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Koneksi PHP 5.3 ke S

Ketika kita terbiasa menggunakan XAMPP, adakalanya ketika kita diharuskan membuat ...

SQLSRV di PHP 5.4

Sudah menggunakan PHP versi 5.4 keatas? Bagi pengembang aplikasi mungkin ...

WampServer 2.2 (WAMP

Sudah lama Wamp yang saya gunakan tidak diupdate, saya mencoba ...

Install Ubuntu 12.04

Install Ubuntu 12.04 menggunakan CD Sudah lama tidak update Ubuntu, saya ...

Membuat Template Web

Template atau kerangka wadah dalam sebuah website adalah sesuatu yang ...