Kali ini saya akan membahas tentang fungsi-fungsi position dalam css.
langsung saja ya kita simak sama-sama.....
A. Pengertian
Position adalah perintah dalam css untuk mengatur posisi. Properti css untuk posisi dengan nilai-nilai, absolute, relative dan fixed menunjukkan posisi elemen satu dengan elemen lainnya atau terhadap body itu sendiri.
B. Latar Belakang
Position bisa juga digunakan untuk div
C. Tujuan & Manfaat
1. Memahami position
2. Membuat program dengan menggunakan position
D. Alat & Bahan
1. Laptop
2. Aplikasi Sublime Text atau aplikasi text editor lainnya.
E. Tahap Pelaksanaan
1. Position Static
Nilai static adalah nilai titik tetap (default).
<div style="width:300px; height: 100px; border: yellow solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; height: 200px; border: 1px solid red;"></div>
</div>
2. Position Absolute
Nilai absolute memungkinkan untuk menghapus elemen dari wadah div dengan deklarasi top, bottom, left, right.
Hubungan dengan wadah div nya hanya jika posisi div terakhir memiliki nilai, jika tidak maka posisinya berhubungan dengan elemen html dengan titik tetapnya pojok kiri atas terhadap area jendela browser.
Contoh 1:
div "red" diposisikan di kanan jendela browser (lihat kotak merah di sebelah kanan atas) tidak berada di dalam div "hitam" karena tidak ada penentuan posisi terakhir sehingga secara defaultnya titik posisi di tentukan terhadap body. <div style="width:300px; height: 100px; border: yellow solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:300px; padding: 10px; border: 1px solid red; position: absolute; top: 0; right: 50px; text-align: center;"> position: absolute; top: 0; right: 50px;
<div>
</div>
Contoh 2:
div "black" memiliki nilai position: relative; menyebabkan div "merah" diposisikan 50px dari atas dan 10px terhadap div "hitam".
<div style="width:300px; height: 100px; border: yellow solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black; position: relative;"> position: relative;
<div style="width:200px; height: 200px; padding: 10px; border: 1px solid red; position: absolute; top: 50px; left: 10px;">
position: absolute; top: 50px; kiri: 10px;
</div>
</div>
3. Position Relative
Nilai relative memungkinkan posisi elemen berhubungan dengan wadah div nya.
Contoh 1:
<div style="width:300px; height: 100px; border: yellow solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; height: 200px; padding: 10px; border: 1px solid red; position: relative; top: 20px; left: 20px;">
position: relative; top: 20px; left: 20px;
</div>
</div>
Contoh 2:
<div style="width:300px; height: 100px; border: yellow solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; height: 200px; padding: 10px; border: 1px solid red; position: relative; bottom: 20px; right: 20px;">
position: relative; bottom: 20px; right: 20px;
</div>
</div>
4. Position Fixed
Elemen yang ada di dalamnya berhubungan dengan eemen html. Titik tetap (default)nya adalah pojok kiri atas dan tidak pernah berkaitan dengan elemen wadah divnya.
Contoh 1:
div "red" berada di kiri atas dengan posisi dari atas 20px.
<div style="width:200px; padding: 10px; border: 1px solid red; position: fixed; top: 20px; left: 0; text-align: center;">
position: fixed; top: 20px; left: 0;
</div>
Contoh 2:
<div style="width:300px; height: 100px; border: yellow solid 1px"></div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:300px; padding: 10px; border: 1px solid red; position: fixed; bottom: 0; right: 0; text-align: center;">position: fixed; bottom: 0; right: 0;
</div>
</div>
F. Referensi
http://jagocoding.com/tutorial/542/Tutorial_Lengkap_Memahami_CSS_Position
http://www.w3schools.com/css/css_positioning.asp
Sekian postingan hari ini. Semoga bermanfaat.
Wassalamualaikum wr.wb
0 comments: