Update Config HTTP Custom semua Operator Download Review

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. 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 nih ..
 .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) ^_^'a :


Jadi disini terlihat  satu keunikan position:relative  ya,, 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 seenaknya 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 0pxnya 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 :


"Hmm,, ada yang aneh.. perasaan tag HTMLnya ada 2 div deh,, kok yang muncul cuma 1?" Yah,,
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 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 kasi 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  nol 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. Saya pernah buat tutorial yang menggunakan implementasi dari position fixed ini, yaitu di
tutorial Membuat Layout Fix Header. 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.

Semoga artikel ini membantu kita memahami penggunaan position dengan baik.. :-)
"Saya hanyalah orang biasa yang gemar membaca, cita-cita ingin mendapatkan passive income tanpa kerja di kantoran"

Post a Comment

Berkomentarlah dengan Baik Bijak Dan Sopan !