1. Pengertian CSS Position
position adalah properti CSS yang mengatur posisi elemen pada halaman web.
Dengan position, kita bisa:
- Mengatur elemen menempel di atas
- Membuat navbar sticky
- Menaruh tombol di pojok layar
- Membuat layout kompleks
Properti ini biasanya dipakai bersama:
top
right
bottom
left
z-index
2. Jenis-Jenis Position di CSS
A. position: static (default)
Semua elemen HTML secara default menggunakan static.
Ciri:
- Tidak bisa digeser dengan top/right/bottom/left
- Mengikuti alur normal HTML
.box {
position: static;
}
📌 Jarang digunakan secara manual karena ini default.
B. position: relative
Elemen digeser dari posisi normalnya.
Ciri:
- Masih mengambil ruang semula
- Bisa digeser pakai top/left
- Sering jadi parent untuk absolute
.box {
position: relative;
top: 20px;
left: 30px;
}
Artinya:
- Turun 20px
- Geser kanan 30px
C. position: absolute
Elemen keluar dari alur normal.
Ciri:
- Tidak mengambil ruang
- Posisi mengikuti parent yang relative
- Jika tidak ada parent → ikut body
.box {
position: absolute;
top: 0;
right: 0;
}
Sering dipakai:
- Badge
- Notifikasi
- Icon pojok card
D. position: fixed
Elemen menempel di layar (tidak ikut scroll)
Ciri:
- Selalu terlihat
- Cocok untuk tombol WA, navbar, dll
.wa {
position: fixed;
bottom: 20px;
right: 20px;
}
E. position: sticky
Gabungan relative + fixed
Ciri:
- Normal saat scroll
- Menempel saat sampai titik tertentu
.navbar {
position: sticky;
top: 0;
}
Cocok:
- Navbar
- Sidebar
3. Perbedaan Singkat
| Position | Keluar dari flow | Mengikuti scroll | Parent penting |
|---|---|---|---|
| static | tidak | ya | tidak |
| relative | tidak | ya | tidak |
| absolute | ya | ya | ya |
| fixed | ya | tidak | tidak |
| sticky | tidak → fixed | tidak | ya |
4. Properti Tambahan
A. z-index
Mengatur tumpukan layer
.box1 { z-index: 1; }
.box2 { z-index: 2; }
Semakin besar → semakin depan
B. top right bottom left
Digunakan untuk menggeser posisi.
top: 0;
right: 0;
bottom: 0;
left: 0;
STUDI KASUS 1
Membuat Badge “Promo” di Pojok Card
Tujuan
Badge muncul di pojok kanan atas gambar.
HTML
<div class="card">
<span class="badge">Promo</span>
<img src="produk.jpg">
</div>
CSS
.card {
position: relative;
width: 200px;
}
.badge {
position: absolute;
top: 0;
right: 0;
background: red;
color: white;
padding: 5px 10px;
}
Penjelasan
- Card = relative
- Badge = absolute
- Badge nempel ke card
📌 Ini penggunaan paling umum di dunia kerja.
STUDI KASUS 2
Tombol WhatsApp Mengambang
Tujuan
Tombol selalu terlihat saat scroll.
HTML
<a href="#" class="wa">WA</a>
CSS
.wa {
position: fixed;
bottom: 20px;
right: 20px;
background: green;
color: white;
padding: 15px;
border-radius: 50%;
}
Hasil
Tombol selalu di pojok kanan bawah.
STUDI KASUS 3
Navbar Sticky
HTML
<div class="navbar">Menu</div>
<div style="height:2000px"></div>
CSS
.navbar {
position: sticky;
top: 0;
background: black;
color: white;
padding: 15px;
}
Navbar akan:
- Normal di atas
- Menempel saat scroll
STUDI KASUS 4
Absolute di Dalam Relative
HTML
<div class="parent">
<div class="child">Saya di pojok</div>
</div>
CSS
.parent {
position: relative;
width: 300px;
height: 200px;
background: gray;
}
.child {
position: absolute;
bottom: 0;
right: 0;
background: yellow;
}
Child akan berada di pojok parent.
Kesalahan Umum Pemula
❌ Lupa parent relative
Absolute tanpa parent → ikut body.
❌ z-index tidak jalan
Harus ada position:
position: relative;
z-index: 10;
❌ Sticky tidak jalan
Pastikan ada:
top: 0;
Studi Kasus Mini Project (Real Dunia Kerja)
Layout Card Produk E-commerce
HTML
<div class="card">
<img src="ayam.jpg">
<span class="promo">-20%</span>
<button class="cart">+</button>
</div>
CSS
.card {
position: relative;
width: 250px;
}
.promo {
position: absolute;
top: 10px;
left: 10px;
background: red;
color: white;
padding: 5px;
}
.cart {
position: absolute;
bottom: 10px;
right: 10px;
}
Digunakan di:
- Tokopedia
- Shopee
- Website restoran
Latihan untuk Anda
Latihan 1
Buat kotak 300px
Tambahkan tulisan di tengah pakai absolute.
Latihan 2
Buat tombol “scroll to top” di pojok.
Latihan 3
Buat navbar sticky.
Kesimpulan
position adalah materi CSS paling penting.
Wajib dikuasai untuk:
- Web design
- Landing page
- UI modern
- Dunia kerja
Urutan belajar terbaik:
- relative
- absolute
- fixed
- sticky
- z-index
CASE STUDI 1
Card Produk + Badge Promo + Tombol Keranjang
(Menggunakan: relative + absolute)
Tujuan
- Badge promo di pojok kiri atas
- Tombol keranjang di pojok kanan bawah
FULL HTML (langsung jalan)
Simpan sebagai index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case CSS Position</title>
<style>
body{
font-family: Arial;
background:#f5f5f5;
padding:40px;
}
/* CARD */
.card{
position: relative; /* parent untuk absolute */
width:250px;
background:white;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
overflow:hidden;
}
.card img{
width:100%;
display:block;
}
.card h3{
margin:10px;
}
.card p{
margin:10px;
color:green;
font-weight:bold;
}
/* BADGE PROMO */
.badge{
position:absolute;
top:10px;
left:10px;
background:red;
color:white;
padding:5px 10px;
font-size:12px;
border-radius:5px;
}
/* TOMBOL CART */
.cart{
position:absolute;
bottom:10px;
right:10px;
background:orange;
border:none;
padding:10px 15px;
border-radius:50%;
cursor:pointer;
}
</style>
</head>
<body>
<div class="card">
<span class="badge">Promo</span>
<img src="https://via.placeholder.com/250x150">
<h3>Ayam Karkas</h3>
<p>Rp 35.000</p>
<button class="cart">+</button>
</div>
</body>
</html>
Penjelasan
.card→ relative.badge→ absolute (pojok kiri atas).cart→ absolute (pojok kanan bawah)
Ini contoh real dipakai di marketplace.
CASE STUDI 2
Tombol WhatsApp Mengambang
(Menggunakan: fixed)
Tujuan
Tombol selalu terlihat saat scroll.
FULL HTML
<!DOCTYPE html>
<html>
<head>
<title>Fixed Button</title>
<style>
body{
height:2000px;
font-family:Arial;
}
.wa{
position:fixed;
bottom:20px;
right:20px;
background:green;
color:white;
padding:15px 20px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Scroll ke bawah</h1>
<a href="#" class="wa">WhatsApp</a>
</body>
</html>
Penjelasan
position: fixed
→ tombol selalu di layar walau discroll.
Digunakan di:
- Website bisnis
- Landing page
- E-commerce
CASE STUDI 3
Navbar Sticky
(Menggunakan: sticky)
Tujuan
Navbar menempel saat scroll.
FULL HTML
<!DOCTYPE html>
<html>
<head>
<title>Sticky Navbar</title>
<style>
body{
margin:0;
font-family:Arial;
}
.navbar{
position:sticky;
top:0;
background:black;
color:white;
padding:15px;
font-weight:bold;
}
.content{
height:2000px;
padding:20px;
}
</style>
</head>
<body>
<div class="navbar">
MENU WEBSITE
</div>
<div class="content">
Scroll ke bawah untuk lihat efek sticky
</div>
</body>
</html>
Penjelasan
- Awalnya normal
- Saat scroll → menempel di atas
CASE STUDI 4
Absolute di Tengah Box
Tujuan
Tulisan tepat di tengah box.
FULL HTML
<!DOCTYPE html>
<html>
<head>
<title>Tengah</title>
<style>
.box{
position:relative;
width:300px;
height:200px;
background:gray;
margin:50px auto;
}
.text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:white;
font-size:20px;
}
</style>
</head>
<body>
<div class="box">
<div class="text">DI TENGAH</div>
</div>
</body>
</html>
CASE STUDI 5 (Mini Project Dunia Kerja)
Layout Website Sederhana
Fitur:
- Navbar sticky
- Tombol WA fixed
- Card absolute badge
FULL HTML MINI PROJECT
<!DOCTYPE html>
<html>
<head>
<title>Mini Project Position</title>
<style>
body{
margin:0;
font-family:Arial;
background:#f5f5f5;
}
/* NAVBAR */
.navbar{
position:sticky;
top:0;
background:red;
color:white;
padding:15px;
text-align:center;
font-weight:bold;
}
/* CONTAINER */
.container{
display:flex;
gap:20px;
padding:40px;
}
/* CARD */
.card{
position:relative;
width:200px;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.card img{
width:100%;
}
.badge{
position:absolute;
top:10px;
right:10px;
background:red;
color:white;
padding:5px 10px;
font-size:12px;
}
/* WA BUTTON */
.wa{
position:fixed;
bottom:20px;
right:20px;
background:green;
color:white;
padding:15px;
border-radius:50%;
text-decoration:none;
}
</style>
</head>
<body>
<div class="navbar">
TOKO AYAM ONLINE
</div>
<div class="container">
<div class="card">
<span class="badge">Promo</span>
<img src="https://via.placeholder.com/200x150">
<h4 style="padding:10px">Ayam Fresh</h4>
</div>
<div class="card">
<span class="badge">Hot</span>
<img src="https://via.placeholder.com/200x150">
<h4 style="padding:10px">Ayam Fillet</h4>
</div>
</div>
<a href="#" class="wa">WA</a>
</body>
</html>
Latihan untuk Anda
Latihan 1
Buat:
- Card produk
- Badge diskon
- Tombol beli pojok
Latihan 2
Buat:
- Navbar sticky
- Tombol scroll top fixed
Latihan 3 (wajib junior web dev)
Buat layout:
- Sidebar sticky
- Konten scroll
