Tutorial Lengkap Memahami Css Position

Tutorial Lengkap Memahami Css Position - Seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. S
Daftar Isi

Tutorial Lengkap Memahami Css Position

Tutorial Lengkap Memahami Css Position - Asep Media Blogger seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu udah punya nilai position:static. 

POSITION:STATIC

Position:static itu adalah tipe posisi paling normal yang mengalir begitu aja. Dalam jumlah yang banyak, tag tipe display block dengan position static akan terus mengalir ke bawah, sedangkan tag tipe display inline akan terus mengalir ke samping seperti biasa.

Contoh:

 <h1>Display Static</h1>
 <div  class="static">block</div>
 <div  class="static">block</div>
 <div  class="static">block</div>

 <br>
 <br>

 <span class="static">inline</span>
 <span class="static">inline</span>
 <span class="static">inline</span>

 .static{
              width:100px;
              height:125px;
              background:#0cf;
              margin:10px;
              /*POSITION:STATIC tidak perlu dibuat, karena secara defaultnya
 sudah static*/
  }

Inilah hasil tampilan position:static;



Sayangnya position:static ini punya kelemahan, position static tidak mempunyai sifat container yang bisa menampung position:absolute didalamnya dengan baik. Sehingga position:static ini biasanya hanya digunakan di tag-tag yang tidak mempunyai anak lagi. Maksudnya apa? Nanti dijelaskan di bawah.

POSITION:RELATIVE

Position:relative adalah jenis position yang paling  banyak digunakan. Memiliki sifat yang sama dengan position:static yang mengalir, akan tetapi perbedaannya position:relative ini bisa mengatur posisinya dengan bantuan property top, left, right, bottom. Patokan property keempat arah tersebut adalah item itu sendiri. Sehingga misalnya item dengan position:relative diberi property top:50px berarti memberikan jarak kosong  50px diatas item  tersebut. Sekarang masih di file HTML yang sama kita tambahkan :

  <!--Kode    yang  tadi    dilanjutin..-->
  <!--......-->

 <br>
 <br>

 <h2>Display Relative</h2>
 <div  class="relative">block</div>

 .relative{
               width:100px;
               height:125px;
               background:#cf0;
               position:relative;
 }

Hasilnya nanti akan sama saja seperti display:static, tidak ada yg istimewa. Hanya muncul sebuah div lagi dibawahnya yang terus mengalir ke bawah. Perbedaannya baru terlihat ketika kita menambahkan di CSSnya property ini.

 .relative{
               /*css  yang tadi*/
               ...

               /*top   /  left    /  right    /  bottom dengan nilai   sembarangan*/
               top:50px;
               left:200px;
 }

Perbandingan position:relative tanpa property arah dan dengan tambahan property arah seperti ini (semoga gambarnya bisa dimengerti)

Jadi disini terlihat satu keunikan position:relative, sekalipun position:relative ini sama-sama mengalir seperti display:static, tapi position:relative ini bisa diatur juga posisinya dengan property 4 arah tersebut. Dan keunikan lagi 1, position:relative ini memiliki sifat container artinya dapat menampung tag dengan position:absolute dengan baik. Sehingga, position:relative ini sangat cocok digunakan untuk tag-tag yang masih memiliki anak lagi. Untuk lebih jelasnya, perhatikan di poin position:absolute sekarang ini ! 

POSITION:ABSOLUTE

position:absolute ini adalah jenis posisi yang fungsinya paling  powerful. Berbeda dengan position:static dan position:relative  yang terus  mengalir, position:absolute ini cenderung tidak mengisi ruangan seperti 2bposition lainnya, dan diam ditempat jika beberapa tag dengan
position:absolute ini berbarengan. Wajar saja, karena fungsi position:absolute sendiri adalah meletakkan item dengan posisi yang bisa diatur semaunya kita.

Sama seperti position:relative, position:absolute ini dibarengi dengan property 4 arah (top, left, right, bottom). Akan tetapi bedanya kalau di position relative titik 0px nya adalah item itu sendiri (lihat gambar diatas), sedangkan di position:absolute ini titik 0pxnya adalah layer yang bersifat container yang ada di parentnya, atau kalau tidak ada layer container sama sekali, maka pojokkan browser sendiri lah yang menjadi  titik  0pxnya. Untuk lebih jelasnya, kita buatkan juga dibawah
proyek HTML kita.

  <!--Tag-tag      lama  tadi...-->

  <br>
  <br>

  <h2>Display    Absolute</h2>
  <div   class="absolute">block</div>
  <div   class="absolute">block</div>

  .absolute{
                  position:absolute;
                  width:100px;
                  height:125px;
                  background:#f00;
  }

 Hasilnya nanti seperti ini :

Perasaan tag HTMLnya ada 2 div deh,, kok yang muncul cuma 1 itulah position:absolute. Karena position:absolute  tidak mengalir seperti position:static dan relative. Sekarang kita akan melihat hubungan position:absolute dengan layer container yang tidak lain adalah layer dengan position:relative; pertama-tama kita lanjutkan dulu tag HTML kita seperti ini :

  <!--Tag    HTML tadi   dibiarkan-->
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <h2>Display    Absolute   didalam    Relative</h2>
  <div   class="relative2">
                  <div   class="absolute2">

                  </div>
  </div>

Sekarang kita membuat 2 layer dengan position yang berbeda. Position yang diluar (parent) sebagai relative, dan position didalam (child) sebagai absolute. Kita coba buat terlebih dulu CSSnya seperti ini:

  .relative2{
                  position:relative;
                  /*lebar     dan  tinggi     bebas  aja,     tapi    dibuat    agak  besar   */
                  width:500px;

7
                height:300px;
                background:#ccc;
  }
  .absolute2{
                position:absolute;
                width:200px;
                height:100px;
                background:#000;
  }
Nah, hasilnya nanti seperti ini :


Sampai disini position:absolute hasilnya masih biasa-biasa aja ya. Sekarang biar perbandingannya
jelas, kita beri property arah di layer .absolute2 itu, jadi seperti ini :
  .absolute2{
                /*CSS yang  tadi*/
                ...
                right:100px;/*<--        Ini   nih   yang bantu  kita    lihat    perbedaannya*/
  }

Hasilnya nanti seperti ini :

right:100px; pada layer dengan position:absolute akan membuat layer tersebut berjarak 100px dari kanan container. Karena dalam hal ini layer parent (.relative2) bertindak sebagai container, maka 100px dari kanan tersebut dihitung mulai dari titik merah seperti di gambar.

Bagaimana kalau layer .relative2 tersebut tidak diberikan position apapun alias static? Coba saja kita hapus position:relative; di layer .relative2, dan hasilnya akan menjadi seperti ini:

Seperti yang kita lihat, karena layer .relative2   tidak  lagi bertindak sebagai container sejak position:relativenya dihapus. Karena itulah position:absolute dapat membuat item tersebut keluar dari layer static ketika diberikan property arah (top, right, bottom, left),, dan ujung browser itu sendiri yang menjadi patokan titik 0 seperti  yang kita lihat pada gambar. Tentunya hal ini mengganggu layout kita, karena itu memang sebaiknya position:absolute itu digunakan hanya didalam tag yang bersifat relative supaya posisi lebih rapi dan mudah diatur.

Sama seperti position:relative, position absolute  ini juga  punya sifat container, sehingga layer dengan position:absolute masih bisa menampung layer absolute lain didalamnya dengan rapi.

POSITION:FIXED

Nah, sekarang kita masuk ke jenis  position  terakhir  yang paling unik dan nggak mungkin ketuker-tuker dengan position yang lain. Position:fixed ini memungkinkan kita meletakkan elemen secara permanen di suatu titik yang tetap diam sekalipun kita ngescroll browser kita sampe manapun. Position:fixed ini juga sering kita temukan di facebook/twitter yang headernya diam di tempat. Untuk mengerti konsepnya, kita buat HTMLnya seperti ini :

  <!--HTML  yang  tadi-->
  ....
  <br>
  <br>

  <h2>Display    Fixed</h2>
  <div   class="fixed"></div>


  .fixed{
                  position:fixed;
                  width:500px;
                  height:100px;
                  background:#ffcc00;
                  top:50px;     /*50px   dari    atas   browser*/
                  left:200px;       /*200px    dari   kiri      browser*/
  }

Sekarang kita lihat hasilnya,,

Nah, itu dia keunikan position:fixed. Sebagai catatan, position:fixed ini juga bersifat container, sehingga layer didalamnya tersebut masih bisa menampung position:absolute dengan baik.

Kesimpulan

Kesimpulan terakhirnya sederhana, masing-masing position punya keunikannya masing-masing, yang digunakan sesuai kebutuhan kita. Kalau kita butuh layer yang peletakannya mengalir yang nggak perlu bersifat container, gunakan STATIC. Kalau kita mau layer yang peletakannya mengalir dan bersifat container, gunakan RELATIVE. Kalau mau layer yang nggak perlu mengalir dan letaknya seenak jidat, gunakan ABSOLUTE. Dan kalau butuh layer yang diam di tempat dalam keadaan apapun, gunakan FIXED.

Gemar membaca, mencari ilmu pengetahuan dimanapun berada, dan menjadi diri sendiri, suka seni musik, suka dengan burung merpati balap.

Posting Komentar