SS POSITION

SS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu sudah memiliki nilai position:static. Berikut kita bahas lebih jauh dari keempat css position tersebut :

Static

position: static;Static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti positionMenggunakan position selain static (non-static),akan membuat sebuah elemen menjadi seolah olah berbeda dimensi dari elemen lainnya.Elemen yang diberi position selain static dapat menggunakan properti top, left, bottom dan right untuk mengatur posisinya .

Relative

position: relative;Ketika kita menggerakan elemen dengan posisi relative (menggunakan properti top, left. bottom dan right), ruang yang ditempati elemen tersebut masih adaKetika kita menggerakan elemen dengan posisi relative, elemen akan bergerak relatif terhadap posisi semula-nyaJika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya.

Absolute

position: absolute;Ketika kita menggerakan elemen dengan posisi absolute (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada.Ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dan elemen parent-nya, selama elemen parent-nya memiliki posisi yang juga non-static.Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen-nya

Jika Absolute tidak memiliki parent relative maka posisinya akan seperti berikut ini :

Tetapi jika Absolute memiliki parent relative maka absolute akan menempel pada parent relative seperti dibawah ini :

Fixed

position: fixed;Ketika kita menggerakan elemen dengan posisi fixed (menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak adaKetika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap window (browser), meskipun elemen parent-nya bernilai non-staticJika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nyaElemen akan 'terkunci' dan tidak bergerak dari posisinya meskipun halaman di-scroll

Komentar

Posting Komentar

Jika ingin mengkritik :
"Dimohon untuk menggunakan bahasa yang sopan santun."

Postingan populer dari blog ini

Mengenal Fitur CSS3

Gambar
Chrome | 43.0  4.0 -webkit- | | Internet Explore / Edge | 10.0 | | Firefox | 16.0 5.0 -moz- | | Safari | 9.0 4.0 -webkit- | | Opera | 30.0 15.0 -webkit- 12.0 -o- | Keterangan : Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti. Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja dengan awalan -webkit-, -moz-, atau -o-. Contoh Pengguna opera versi 30.0 ke atas : div { animation-iteration-count: 2; } Sedangkan pengguna opera versi 15.0 hingga 29.0 : div { -webkit-animation-iteration-count: 2; } Nilai Properti : animation-name menentukan nama  keyframe  yang akan dikaitkan ke  selector animation-duration menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk menyelesaikan animasi animation-timing-function Menentukan kurva kecepatan animasi Nilai properti : linear mengatur animasi dengan kecepatan yang sama dari awal hingga akhir ease Nilai default  an
Baca selengkapnya

Command Line

Gambar
Version control system  atau disingkat VCS adalah kategori perangkat lunak yang dapat membantu Kamu atau tim Kamu untuk mengelola setiap perubahan yang dilakukan dari waktu ke waktu. VCS merekam setiap perubahan kode yang dilakukan sehingga jika terjadi kesalahan kita dapat melakukan rollback untuk membanding code sebelum dan sesudah perubahan dilakukan sehingga dapat membantu kita dalam meminimalisir kesalahan. Bagi seorang programmer source yang telah dibuat adalah aset yang berharga karena berisi kumpulan solusi dari masalah yang telah dipecahkan dan diselesaikan. Dengan adanya VCS dapat melindungi source code dari kesalahan yang dilakukan oleh manusia dan dari hal-hal lain yang tidak diinginkan. Tanpa VCS Kamu akan kesulitan dalam mengelola dan berkordinasi dengan tim terkait perubahan yang telah dilakukan sehingga tidak saling timpa-menimpa satu sama lain. Dalam mengembangkan perangkat lunak tanpa menggunakan VCS sangat beresiko, seperti tidak memiliki backup. VCS juga dapat memb
Baca selengkapnya

Jenis dan Macam Konektor Pada Jaringan Komputer

Gambar
Jenis dan Macam Konektor Pada Jaringan Komputer Konektor dalah perangkat keras yang menghubungkan kabel dengan port pada suatu jaringan. Sebagaimana yang kalian ketahui pada jaringan komputer berbasis kabel (wired) diperlukan sebuah kabel dan juga konektornya untuk menghubungkan port dan kabel itu sendiri. Dan berikut saya jelaskan mengenai jenis dan macam-macam konektor yang sering dijumpai pada jaringan komputer disekitar kita. 1.  Konektor RJ11 dan RJ45 Kedua jenis konektor ini digunakan sebagai penghubung pada jaringan komputer dengan menggunakan kabel jenis Twisted Pair baik itu UTP maupun STP. (Read More:  Pengertian Kabel Twisted Pair ) Umumnya kita hanya memenui konektor RJ45 yang digunakan pada jaringan komputer, dimana konektor tersebut dihubungkan melalui port RJ45 pada komputer. 2.  Konektor BNC (Bayonet Neil Concelman)   Konektor BNC biasanya dipadukan dengan kabel coaxial, baik itu thick coaxial ataupun thin coaxial. (Read More:  Apa itu kabel coaxial
Baca selengkapnya