Belajar HTML dan CSS part 7

CSS Positioning

Salam hangat pada kalian semua yang telah setia pada blog ini atau pun kalian yang hanya numpang lewat cari informasi.Semoga kalan bisa menjadi orang yang berbakat dan sukses pada bidangnya masing-masing.Tak perlu menunggu lama lagi .Tutorial kali ini saya akan membahas menenai layout dan positioning pada css

Kita bahas dulu menegnai positioning.Positioning terdapat empat nilai yaitu:relative,absolute,fixed,staticSecara default tag tag yang kita buat itu sudah mempunya sebuah nilai.Pertama kita bahas dari yang lebih mudah di pahami dulu yaa,Yaitu Static

• Position Static merupakan tipe pem-posisian paling normal yang mengalir begitu saja.Dalam jumlah yang biasanya banyak.Tag display blok static akan terus mengalir ke bawah.Sedangkan tag display:inline akan mengalir seperti biasa.Contoh sebagai berikut:

.static{     width:100px;     height:125px;     background:#0cf;     margin:10px; }

Tak ada yang sempurna di dunia ini semua pasti mempunyai kelemahan.Sama halnya seperti position static.Position static tidak mempunyai sifat container di dalamnaya yang bisa untuk menampung position didamnya dengan baik.

• Position Relative.Merupakan jenis position yang paling lumrah digunakan.Memiliki sifat yang sama dengan position static yang mengalir.Bedanya adalah position relative ini bisa mengatur posisinya dengan bantuan posisi Top,Bottom,Left,Right Property empat arah itu adalah item itu sendiri sehingga misalnya item dengan position relative diberi property right:21px; berari kalian memebrikan jarak kosong sebesar nilai yang diinput tadi dengan kanan

.static{     width:100px;     height:125px;     background:#0cf;     margin:10px;     position:relative;     top:21px;     right:91px; }

Sebenarnyas sama halnya dengan position:static hanya saja ada penemebahan propery left,right,top,bottom.

• Position absolute adalah position yang paling mengesankan.Sangat berbda dengan position static dan position relative yang terus mengalir.Position absolute ini cenderung tidak mengsi ruangan seperti pada position sebelumnya.Fungsi position absolute sendiri adalah meletakan item yang ingin kita atur sesuka hati.Sama seperti positionb relative position absolute juga mengguankan property empa arah.Perbedaanya adalah position relative titik 0 px adalah item itu sendiri..Sedangkan di position abdolute titix 0 px nya adalah layer yang besifat container.di parentnya, atau kalau tidak ada layer container sama sekali, maka pojokkan browser sendiri lah yang menjadi titik 0pxnya.

  .static{     width:100px;     height:125px;     background:#0cf;     margin:10px;     position:absolute;     top:21px;     right:91px; }

• Position Fixed merupakan position yang paling sering kita lihat seperti di header fb,twitter,Fb.Position fixed memnungkinkan kalian hanya menyimpan satu titik makan akan diikuti item laiinya.