Properti css untuk posisi dengan nilai-nilai, absolute, relative dan fixed menunjukkan posisi elemen satu dengan elemen lainnya atau terhadap body itu sendiri. Kita gunakan 3 div dengan masing-masing warna kuning, hitam dan merah.
Berikut contoh sederhana penerapan nilai position di atas dan efek mereka pada elemen.
HTML dengn css
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>
Demo
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>
Demo
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>
Demo
Contoh 3:
<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; bottom: 20px; right: 10px;”>
position: absolute; bottom: 20px; right: 10px;
</div>
</div>
Demo
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>
Demo
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>
Demo
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>
Demo
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>
Demo
DEMO position: static, absolute, relative dan static
Kunjungi www.proweb.co.id untuk menambah wawasan anda.