Hay guys, pernah denger atau lihat property dari css yaitu position: absolute atau position: relative ga ? Position itu sendiri merupakan property css yang memiliki 3 nilai yaitu absolute dan relative serta fixed. Tapi yang akan saya bahas di sini yaitu perbedaan dari position absolute dan relative. Kalau di pikir-pikir apa sih perbedaannya ? dari pada di bayangin yuk mending kita langsung coba aja... :D Pertama-tama siapkan dulu file .htmlnya untuk cssnya kita pake metode internal css. Yuk langsung di coba, ini dia kodenya :
<!DOOCTYPE Html>
<html>
<head>
<title>Position</title>
<style type="text/css">
#header{
width:900px;
margin:0px auto;
height:500px;
background-color:blue;}
#box{
width:200px;
height:200px;
background:yellow;
position:absolute;
top: 70px;
left: 20px;}
</style>
</head>
<body>
<div id="header">
<div id="box">
POsition Absolute
</div>
</div>
</body>
</html>
<html>
<head>
<title>Position</title>
<style type="text/css">
#header{
width:900px;
margin:0px auto;
height:500px;
background-color:blue;}
#box{
width:200px;
height:200px;
background:yellow;
position:absolute;
top: 70px;
left: 20px;}
</style>
</head>
<body>
<div id="header">
<div id="box">
POsition Absolute
</div>
</div>
</body>
</html>
Di dalam id header kita isikan width sebesar 900px dan height sebesar 200px, untuk margin:0px auto itu artinya bahwa id header kita akan di posisikan di tengah tengah. Di dalam id header kita buat id box, id box inilah yang akan kita isikan property css position. Berikut kode dari id box :
#box{
width:200px;
height:200px;
background:yellow;
position:absolute;
top: 70px;
left: 20px;}
width:200px;
height:200px;
background:yellow;
position:absolute;
top: 70px;
left: 20px;}
Perlu di ketahui sebelumnya bahwa position absolute itu artinya bahwa letak dalam penempatannya berpatokan pada layar dari browser atau pojok kiri atas dari browser. Jadi yang sebenarnya id judul yang terdapat di dalam id header itu letaknya berpatokan dengan id header cuman karena kita mengisinya property css position: absolute, id box tersebut akan keluar dari id header. Sedangkan position relative itu tata letaknya berpatokan dengan element penampungnya. Pada kode css di atas ada property top dan left, top di sini adalah jarak atas dan left adalah jarak kiri. Silahkan di coba agar lebih memahami. Agar lebih jelasnya, kita lihat gambar di bawah ini yang membedakan titik pusat (kordinat 0,0) kedua position tersebut.
- position-relative-absolute
