Position merupakan property css yang digunakan untuk menentukan sifat posisi suatu elemen di suatu dokument. Sifat di sini dalam artian elemen bisa berubah, tetap , dan lain lain . Nilai dari propety bisa berbentuk static, relative, abosulute, atau fixed. Mari kita pahami satu persatu value dari property css position.
A. Position Static
Value static akan membuat suatu element bertumpukan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 10px;
}
.green {
background-color: green;
position: static;
}
.red {
background-color: red;
position: static;
}
.yellow {
background-color: yellow;
position: static;
}
</style>
</head>
<body>
<div class="green">Green</div>
<div class="red">Red</div>
<div class="yellow">Yellow</div>
</body>
</html>B. Position relative
Value relative digunakan untuk membuat suatu element bisa dipindah pindahkan, memindahkan elemen tersebut dengan property seperti top , left. Sehingga elemen tersebut akan menindihi layernya elemen lain
.red {
background-color: red;
position: relative;
top: 10px;
}C. Position absolute
Value absolute digunakan untuk membuat suatu elemen bisa dipindahkan dan membuat elemen mengambang ke atas dibanding element lain. Bedanya dengan property relative, pada property absolute layer bawahnya akan bergeser seolah olah berada di bawah layer dengan property relative.
.red {
background-color: red;
position: absolute;
top: 10px;
}D. Position fixed
Value fixed digunakan untuk membuat elemen mengambang di antara elemen elemen lain dan juga bisa dipindahkan posisinya. Property ini mirip dengan property absolute. Bedanya dengan property absolute adalah property dengan value fixed posisinya akan tetap berada di posisinya terhadap layar meskin layar page scroll
Perubahan code dibawah ini tampak di class red, yang mana value propertynya adalah fixed dengan posisi top di 0. Class red terletak di dalam class container yang mempunyai tinggi 1200px. Sehingga untuk melihat body dari container bagian bawah harus scroll down.
.container {
height: 1200px;
border: 1px solid #000000;
}
div {
padding: 10px;
}
.green {
background-color: green;
position: static;
}
.red {
background-color: red;
position: fixed;
top: 0px;
}
.yellow {
background-color: yellow
position: static;
}
Leave a Reply