Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen dan dibatasi oleh parent yang memiliki positioning relative. Sulit memahami apa yang saya tulis diatas, kita langsung ke contoh kasus.Silahkan temen-temen buat file baru dan beri nama absolute.html lalu ketikkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Absolute</title>
<style type="text/css" media="screen">
#box{
width:300px;
height:300px;
background:blue;
}
#box2{
width:50px;
height:50px;
background:yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="box2"></div>
</div>
</body>
</html>
Berikut hasil kode diatas:
#box2 secara aturan ditampilkan berada di dalam div #box, anda dapat terlepas dari aturan tersebut dengan menambahkan positioning absolute. Sekarang tambahakan position:absolute dan tentukan property bottom dan right.
#box2{
width:50px;
height:50px;
background:yellow;
position:absolute;
bottom:0; right:0;
}
Hasil dari kode diatas sebagai berikut:
#box2 akan terlepas dari aturan penempatan elemen (keluar dari #box) dan berada di kanan bawah browser. Untuk membatasi pergerakan dari #box2 yang memiliki positioning absolute, maka kita harus menambahkan positioning relative pada parentnya yakni #box.
#box{
width:300px;
height:300px;
background:blue;
position:relative;
}
Hasil dari kode diatas sebagai berikut:
Sekarang #box2 berada di kanan bawah parentnya #box. Andapun dapat bermain dengan nilai negative untuk mendapat efek tertentu.
#box2{
width:50px;
height:50px;
background:yellow;
position:absolute;
bottom:-25px;
right:20px;
}
Hasil dari kode diatas adalah:
Note:Sulit memahami Relative-Absolute? Bayangkan “Relative” sebagai sangkar bagi “Absolute”, oleh karena itu pergerakan “Absolute” dibatasi oleh “Relative”.
Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memposisikan Website Menjadi Absolute (Positioning CSS)? Mungkin itu saja tulisan yang membahas tentang Cara Memposisikan Website Menjadi Absolute (Positioning CSS), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon