Positioning dalam CSS adalah salah satu konsep fundamental yang harus dikuasai untuk mengatur letak elemen agar sesuai dengan desain. Dengan memahami CSS Positioning kita bisa mengontrol penempatan elemen secara presisi, mulai dari posisi default hingga posisi yang tetap di layar saat discroll.
Apa itu CSS Positioning?
CSS Positioning adalah teknik untuk mengontrol posisi elemen pada HTML. Dengan properti position dalam CSS, memungkinkan kita untuk menentukan bagaimana suatu elemen ditempatkan relatif terhadap elemen lain atau terhadap viewport browser.
Pada properti position memiliki 4 nilai utama yaitu:
- Static (default)
- Relative
- Absolute
- Fixed
Position Static
Position Static adalah nilai default untuk semua elemen HTML. Elemen dengan posisi static akan ditampilkan mengikuti alur normal dokumen, dan tidak dapat dipindahkan menggunakan properti top, right, bottom, atau left. Contoh penggunaannya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<style>
.static-box {
position: static;
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="static-box">Box 1 - Static</div>
<div class="static-box">Box 2 - Static</div>
<div class="static-box">Box 3 - Static</div>
</body>
</html>
Pada contoh kode di atas, ketiga box dengan class .static-box akan ditampilkan secara berurutan dari atas ke bawah sesuai dengan urutan dalam HTML.
Kapan Position Static Digunakan?
Kita bisa menggunakan position: static; ketika tidak perlu mengatur posisi khusus, biarkan elemen mengikuti flow normal dari dokumen.
Position Relative
Position Relative tetap mengikuti alur normal pada dokumen, tetapi dapat digeser dari posisi aslinya menggunakan properti top, right, bottom, atau left. Contoh penggunaanya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid gray;
padding: 20px;
}
.relative-box {
position: relative;
width: 150px;
height: 80px;
background-color: lightgreen;
border: 2px solid green;
margin: 10px;
}
.moved-box {
position: relative;
top: 20px;
left: 30px;
background-color: orange;
border: 2px solid darkorange;
}
</style>
</head>
<body>
<div class="container">
<div class="relative-box">Box Normal</div>
<div class="relative-box moved-box">Box Moved</div>
<div class="relative-box">Box Normal Lagi</div>
</div>
</body>
</html>
Box dengan class moved-box atau box kedua akan tetap memakan tempat posisi asli, namun box akan bergeser 20px ke bawah dan 30px ke kanan.
Kapan Position Relative Digunakan?
Jika kamu hanya ingin menggeser elemen sedikit saja tanpa mengubah struktur layout secara keseluruhan, kita bisa menggunakan positioning: relative;.
Position Absolute
Position Absolute membuat elemen seolah-olah keluar dari dokumen atau lebih tepatnya mengambang di atas dokumen. Contoh penggunaannya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
background-color: lightgray;
border: 2px solid gray;
margin: 20px;
}
.absolute-box {
position: absolute;
width: 100px;
height: 80px;
background-color: red;
border: 2px solid darkred;
color: white;
text-align: center;
line-height: 80px;
}
.top-left {
top: 10px;
left: 10px;
}
.top-right {
top: 10px;
right: 10px;
}
.bottom-center {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.normal-text {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="normal-text">
this is normal text inside container with relative position.
</div>
<div class="absolute-box top-left">Top Left</div>
<div class="absolute-box top-right">Top Right</div>
<div class="absolute-box bottom-center">Bottom Center</div>
<div class="normal-text">
this is normal text too
</div>
</div>
</body>
</html>
Pada contoh kode diatas, elemen dengan position: absolute; tidak akan mempengaruhi posisi dari teks normal.
Tips Mendefinisikan Position Absolute
Perlu diketahui, pada saat kita mendefinisikan sebuah elemen dengan position: absolute;, maka kita perlu mendefinisikan parent elemen sebagai position: relative;. Jika tidak, elemen dengan position: absolute; akan diposisikan relatif terhadap document body.
Kapan Position Absolute Digunakan?
Sangat berguna jika kita ingin membuat sebuah component seperti tooltip, dropdown menu, popup, dan lain sebagainya.
Position Fixed
Position Fixed akan membuat elemen terkunci pada posisi tertentu pada layar (viewport) browser. Dan elemen yang didefiniskan sebagai fixed, tidak akan bergerak saat halaman kita scroll. Contoh penggunaanya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
height: 2000px; /* making the page scrollable */
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 20px;
background-color: navy;
color: white;
text-align: center;
z-index: 1000;
}
.content {
margin-top: 80px;
padding: 20px;
line-height: 1.6;
}
.scroll-content {
height: 500px;
background-color: lightcyan;
margin: 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<nav class="navbar">
Fixed Navbar Example
</nav>
<div class="content">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla nisl, cursus vitae odio sed, iaculis convallis arcu. Duis ut rhoncus urna. Ut hendrerit nibh quis mi commodo blandit in ut dolor. Curabitur id magna vitae quam vulputate ultrices eget at magna. Vivamus suscipit lacus convallis ex mollis auctor. Etiam erat enim, convallis ac est a, ornare venenatis nunc. Ut faucibus justo eu neque egestas, id ullamcorper velit laoreet. Nunc scelerisque, magna a suscipit maximus, odio nisl tempor elit, id elementum nunc leo sed nibh. Aenean sagittis facilisis luctus. Sed sit amet orci ante. Morbi sit amet augue luctus, fringilla sapien sit amet, convallis purus. Fusce malesuada rutrum tellus.
Integer vel sapien nulla. Aenean iaculis tempus ligula in bibendum. Vestibulum vel accumsan quam, sit amet tincidunt lacus. Aliquam erat volutpat. Vivamus scelerisque lacus tellus, eget dignissim mauris eleifend nec. Quisque urna mauris, consequat sit amet dapibus gravida, lacinia id quam. Sed convallis eros sed lorem hendrerit rutrum. Integer cursus augue eu orci convallis laoreet. Aenean auctor, diam eu suscipit feugiat, nunc tellus efficitur dolor, id ornare purus orci ac nibh. Aliquam erat volutpat.
Mauris blandit luctus rutrum. Vestibulum ut nunc massa. Nam id vestibulum dui. Suspendisse posuere semper tellus lacinia iaculis. Sed placerat enim a efficitur tincidunt. Vivamus velit turpis, auctor eget dapibus ac, feugiat a elit. Duis id mauris nisl. Nulla vestibulum elementum eros in convallis.
Sed laoreet, sapien in scelerisque feugiat, neque lectus scelerisque est, non ultricies nisl tellus nec lacus. Aliquam convallis mattis semper. Donec eu tortor justo. Quisque a convallis massa, in tempus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus risus eros, molestie vel congue eget, consequat in elit. Nulla pellentesque vel dui a ornare.</p>
</div>
</body>
</html>
Pada contoh kode diatas, jika kamu melakukan scroll kebawah, maka navbar akan tetap berada di atas layar browser.
Kapan Position Fixed Digunakan?
Sangat cocok saat kita membuat elemen seperti navbar, banner, atau elemen yang perlu selalu terlihat pada browser saat di scroll.
Kesimpulan
Dengan memahami CSS Positioning dan mengetahui perbedaan antara static, relative, absolute, dan fixed, kita dapat membuat tampilan web yang lebih dinamis, interaktif, dan fleksibel.
Terimakasih, sampai jumpa di artikel selanjutnya.
