3. Menggunakan Properti position
Property position erguna untuk mengatur peletakan elemen. Dengan menggunakan property ini dimungkinkan untuk membuat dua elemen yang saling bertindihan semacam contoh berikut :
posisi.css
.satu { right : 50px ;
top : 50px ; position : absolute ;
border : solid ; background-color : CCFF99 ;
margin : 2px ; }
.dua{ position : absolute ;
right : 200px ; top : 200px ;
border : solid ; background-color : CCFF99 ;
margin : 2px ; }
posisi.html Contoh properti position :
position.html
html head
titlePosisi Gambartitle link rel =stylesheet type = textcss href = posisi.css
head body
div class = satu img src = gambarexoticaMutasi.png
div div class = dua
img src = gambarexoticaMutasi.png div
body html
html head
titleProperti Positiontitle link rel=stylesheet type=textcss href=position.css
head body
div bigiBegonia Masonianaibig
hr Dikenal dengan nama populer begonia Iron Cross.
Daun seperti berbludru. Menyukai tempat yang agak teduh.
position.css Hasilnya
Media berupa humus bambu. Tidak menyukai air yang terlalu banyak.
tetapi juga tidak tahan kekeringan. div
div class=divKhusus bigiCodiaeum Variegatumi Angel Wingsbig
hr Puring indah dengan daun tumbuh kompak. Bisa ditanam
dalam pot dan diletakkan di terasrumah. Paling tidak mendapat sinar matahari pagi. Media bisa berupa campuran
tanah dan pupuk kandang. Kebutuhan air sedang. div
div bigiSanseviera Trifasciatai Streakerbig
hr Sanseviera atau yang dikenal sebagai Lidah Mertua ini
berukuran relatif kecil. Tumbuh kompak. Warna perpaduan hijau dan krem. Tahan kering. Cocok dipajang dalam ruangan.
Seminggu sekali keluarkan di teras sekitar 1 hari. Media berupa campuran tanah dan pupuk kandang.
div body
html
div { border : solid ;
background-color : CCFF99 ; margin : 2px ;
} .divKhusus {
position : static ; }
Dari hasil diatas tak ada yang istimewa. Properti position yang bernilai “static” identik kalau tidak disebutkan. Makna “static” menyatakan bahwa peletakan elemen mengikuti alur normal, tanpa
memperhatikan nilai top, left, bottom, dan right. Sekarang coba ganti
.divKhusus { position : static ;
} Menjadi
.divKhusus { position : absolute ;
left : 40px ; top : 75px;
background-color : FFCC99 ; }
Hasilnya
Sekarang position diisi dengan “absolute”. Nilai ini berarti bahwa posisi terhadap elemen yang berkelas “divKhusus” memiliki letak yang bersifat absolut, yang ditentukan oleh :
Left : 40 piksel yang berartidari kiri 40 piksel Top : 75 piksel yang berarti dari atas 75 piksel
Nilai lain yang bisa digunakan pada position adalah “relative”. Nilai ini berarti bahwa letak pengaturan bersifat relatif terhadap posisi aslinya kalau tidak diatur. Sebagai contoh, bila
absolute pada contoh di depan diubah menjadi “relative” maka hasilnya sebagai berikut
Kemungkinan nilai yang lain untuk position adalah “fixed”. Efek yang ditimbulkan seperti absolute, tetapi kalau terjadi penggulungan, posisinya akan tetap. Contoh berikut menunjukkan
keadaan ketika layar bisa digulung
Nah, kalau kemudian kita menggeser ke bawah, posisi elemen yang berisi ‘Angel Wings’ tetap berada di situ. Contoh ditunjukkan pada gambar berikut
4. Mengenal Properti display
Kategori