Dalam CSS kita mengenal 4 macam position yaitu static, absolute, relative dan fixed. Saat ini kita akan membahas static postion dan relative position.
Pada position: static, elemen-elemen tersusun terus ke bawah tanpa memperhatikan offset. Static merupakan position secara default.
Contoh coding adalah sebagai berikut :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Static Position</title>
<style type=”text/css”>
#satu, #dua, #tiga, #empat, #lima
{
position: static;
width: 300px;
height: 100px;
}
#satu
{
left: 10px;
background-color:red;
}
#dua
{
left: 20px;
background-color:green;
}
#tiga
{
left: 30px;
background-color:blue;
}
#empat
{
left: 25px;
background-color:grey;
}
#lima
{
left: 15px;
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 dari coding di atas dapat kita lihat di http://aris.proweb.asia/position_static.html dengan tampilan seperti gambar di bawah ini:
Untuk position: relative, elemen disusun terus ke bawah tetapi juga memperhitungkan offset. Jika kita mengubah coding di atas menjadi position: relative maka tampilan dapat dilihat di http://aris.proweb.asia/position_relative.html dengan hasil seperti gambar berikut ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.