Dengan menggunakan absolute position kita dapat menempatkan elemen secara absolute terhadap elemen pembungkusnya/wrapper. Dengan cara ini kita dapat menempatkan suatu elemen dengan leluasa karena tidak tergantung dengan elemen-elemen sebelumnya.
Untuk lebih memudahkan kita mengerti absolute position, mari kita melihat coding berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Position Absolute</title>
<style type=”text/css”>
#satu, #dua, #tiga, #empat, #lima
{
position: absolute;
width: 100px;
height: 50px;
}
#satu
{
left: 0px;
top: 0px;
background-color:red;
}
#dua
{
left: 50px;
top: 20px;
background-color:green;
}
#tiga
{
left: 100px;
top: 30px;
background-color:blue;
}
#empat
{
left: 180px;
top: 25px;
background-color:grey;
}
#lima
{
left: 250px;
top: 10px;
background-color:cyan;
}
</style>
</head>
<body>
<div id=”satu”>satu</div>
<div id=”dua”>dua</div>
<div id=”tiga”>tiga</div>
<div id=”empat”>empat</div>
<div id=”lima”>lima</div>
</body>
</html>
Hasil coding tersebut dapat dilihat pada http://aris.proweb.asia/position_absolute.html dengan tampilan seperti bambar berikut ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.