Belajar CSS - Display, Visibility, dan Positioning Dasar
Episode ini membahas cara elemen ditampilkan: display block, inline, dan inline-block, serta perbedaan visibility dengan display none. Dipelajari juga positioning statik, relatif, absolut, dan fixed sebagai dasar pengaturan posisi.
#Pendahuluan
Setelah memahami box model di episode 4, pertanyaan berikutnya adalah bagaimana kotak-kotak disusun dalam halaman. Jawabannya dimulai dari display — yang menentukan perilaku dasar elemen — dan position — yang menentukan cara elemen diposisikan secara presisi, ditambah visibility yang sering tertukar dengan display.
#Display: Block, Inline, dan Inline-Block
Elemen block mengisi seluruh lebar parent dan memulai baris baru (div, p, h1, section), sementara elemen inline mengalir dalam teks dan hanya selebar isinya (a, span, strong). Elemen inline tidak bisa diberi width atau height.
#Inline-Block dan Mengubah Display
.badge {
display: inline-block;
width: 24px;
height: 24px;
background-color: #2563eb;
border-radius: 50%;
}
.menu-utama {
display: flex;
}display: inline-block mengalir seperti inline tetapi menghormati width, height, margin, dan padding seperti block — cocok untuk badge atau ikon. display: flex mengaktifkan Flexbox (episode 7); display: none menghapus elemen dari layout.
#Visibility vs Display
display: none menghapus elemen dari alur dokumen — ruangnya hilang. visibility: hidden menyembunyikan elemen secara visual tetapi ruangnya tetap ada:
.dihapus { display: none; }
.disembunyikan { visibility: hidden; }
.tampil { visibility: visible; }Gunakan display: none untuk menghapus elemen sepenuhnya; visibility: hidden bila posisinya harus dipertahankan, misalnya placeholder untuk konten yang dimuat asinkron.
#Positioning Dasar
position: static adalah nilai default — elemen mengalir normal dan properti top, left, right, bottom tidak berpengaruh. position: relative menggeser elemen dari posisi normalnya tanpa meninggalkan ruang:
.badge-nomor {
position: relative;
top: -4px;
}
.kartu {
position: relative;
}
.lencana {
position: absolute;
top: 8px;
right: 8px;
background-color: #dc2626;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #0f172a;
z-index: 100;
}position: absolute mengeluarkan elemen dari alur dan memposisikannya relatif terhadap ancestor yang berposisi — itulah mengapa parent diberi position: relative sebagai acuan badge di sudut kartu. position: fixed menempel pada viewport, jadi navbar tetap terlihat saat di-scroll.
#Z-Index dan Stacking Context
Ketika elemen berposisi saling tumpang tindih, z-index menentukan siapa di depan — nilai lebih besar tampil di atas:
.modal {
position: fixed;
z-index: 50;
}
.overlay {
position: fixed;
z-index: 40;
background-color: rgba(0, 0, 0, 0.5);
}z-index hanya bekerja pada elemen berposisi (selain static) dan pada flex/grid item.
#Latihan: Navigasi dan Badge
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar"><a href="#">Beranda</a><a href="#">Artikel</a></nav>
<div class="kartu"><span class="lencana">Baru</span><h2>Judul Kartu</h2></div>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 60px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #0f172a;
}
.navbar a {
display: inline-block;
color: white;
padding: 12px 16px;
}
.kartu {
position: relative;
max-width: 400px;
margin: 32px auto;
padding: 24px;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.lencana {
position: absolute;
top: 8px;
right: 8px;
background-color: #dc2626;
color: white;
border-radius: 8px;
padding: 2px 8px;
}Jalankan npx serve . dan amati navbar yang tetap di atas saat halaman di-scroll serta lencana yang menempel di sudut kartu.
#Kesalahan Umum dan Solusinya
Elemen absolute melayang: cek apakah ancestor-nya sudah position: relative — ini alasan paling umum badge "lari" ke sudut lain halaman.
Top dan left tidak berpengaruh: kemungkinan elemen masih position: static; properti offset hanya bekerja pada elemen relatif, absolut, fixed, atau sticky.
Display none menghilangkan ruang: untuk menyembunyikan elemen sementara, gunakan visibility: hidden bila posisinya harus dipertahankan.
#Penutup
Inti yang harus dibawa pulang:
- Block mengisi satu baris penuh; inline mengalir dalam teks; inline-block menggabungkan keduanya.
display: nonemenghapus ruang;visibility: hiddenmempertahankannya.position: relativemenggeser elemen tanpa meninggalkan posisi.- Absolut memposisikan relatif terhadap ancestor berposisi; fixed menempel pada viewport.
z-indexmenentukan urutan lapisan hanya pada elemen berposisi.- Selalu beri parent
position: relativesaat menempatkan anak absolut.
Di episode 6 selanjutnya kita akan membahas warna, opacity, dan model warna modern — format HEX, RGB, dan HSL, properti opacity, serta model warna modern untuk gamut yang lebih luas. Siapkan browser kalian untuk eksperimen warna yang menyenangkan.