CSS Position
Pengertian
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.
Static
Value static merupakan nilai default dari position suatu element. Value static akan membuat suatu element bertumpukan . Untuk melihat hasil dari penggunaan value static buat file html dengan code berikut.
<!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>
dari code tersebut kita akan mendapatkan tampilan sebagai berikut
relative
Value relative digunakan untuk membuat suatu element bisa dipindah pindahkan . By default elemen memang tumpukan sebagaimana pada value static, tetapi kita bisa memindahkan elemen tersebut dengan property seperti top , left. Sehingga elemen tersebut akan menindihi layernya elemen lain. Untuk melihat efek dari penggunaan property relative ubah css dari class red menjadi sebagai berikut
.red {
background-color: red;
position: relative;
top: 10px;
}
dari hasil di atas tampak div dari class red bergeser ke bawah menimpa class yellow dengan elemen yang lain tetep berada pada posisi awal ketika elemen class red tidak dipindahkan.
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. Untuk melihat efeknya mari kita ubah css dari class red menjadi seperti berikut
.red {
background-color: red;
position: absolute;
top: 10px;
}
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. Lebih jelasnya ubah code body menjadi sebagai berikut
<div class="container">
<div class="green">Green</div>
<div class="red">Red</div>
<div class="yellow">Yellow</div>
</div>Di bagian style css ubah menjadi seperti berikut
.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;
}
Perubahan code 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. Karena nilai dari propertynya fixed, class red akan tetap muncul walaupun scroll down. Lihat gambarnya sebagai berikut
![Gambar](data:image/svg+xml;charset=utf-8,<svg%20height="1346px"%20width="2560px"%20xmlns="http://www.w3.org/2000/svg"%20version="1.1"/>)
Komentar
Posting Komentar