Untuk artikel kali ini kita akan mencoba mencari tahu apa perbedaan position yang ada pada properti CSS. Mulai dari CSS position static, relative, absolute, fixed.
position:static
Pada posisi ini, sebenarnya ini adalah posisi default (statis) suatu elemen hampir tidak ada perbedaan sama sekali.
position:relative
Pada posisi ini kita bisa memanfaatkan properti top dan left. Objek akan berubah terhadap elemen utama dan juga relatif terhadap dirinya.
position:absolute
position absolute pada css, misalnya kita menerapkan objek memiliki position absolute, maka objek tersebut akan mengikuti induk elemen (parent), dengan catatan induk elemen menggunakan position relative.
position:fixed
Pada position:fixed ini posisi elemen akan tetap atau akan selalu pada posisinya (diam), meskipun browser di scroll.
Live source
<!DOCTYPE html>
<html>
<head>
<title>CSS Position</title>
<style>
/* CSS Reset */
*{
padding: 0;
margin: 0px;
}
#wrapper{
margin: auto;
width: 800px;
height: 900px;
background-color: #7ACCE8;
}
#box1{
background-color: #2DDA47;
height: 100px;
width: 200px;
}
#box2{
background-color: #C4E51F;
height: 100px;
width: 200px;
position: relative;
top: 20px;
left: 50px;
}
#box3{
background-color: #E71B1B;
height: 100px;
width: 200px;
position: absolute;
top: 1px;
left: 1px;
}
#box4{
background-color: #EC1CD0;
height: 100px;
width: 200px;
position: fixed;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">
<h3>posisi statis</h3>
</div>
<div id="box2">
<h3>posisi relative</h3>
</div>
<div id="box3">
<h3>posisi absolute</h3>
</div>
<div id="box4">
<h3>posisi fixed</h3>
</div>
</div><!-- end of wrapper -->
</body>
</html>
Semoga artikel yang singkat ini dapat membantu teman-teman dalam memahami CSS Property Position dan Valuenya. Sampai jumpa pada artikel berikutnya.