Layout: Display & Positioning

Menguasai properti display CSS dan sistem positioning untuk membuat layout sticky header, floating button, dan elemen yang di-overlay.

Phase

Phase 2 — CSS

Topik

CSS Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Memahami display: block, inline, inline-block, none
02Menguasai position: static, relative, absolute, fixed, sticky
03Menggunakan z-index dan stacking context
04Centering elemen dengan margin auto dan transform
05Memahami float dan clear (legacy)
06Membuat sticky header dan floating action button

📖Sub-topik & Materi

01display: block, inline, inline-block, none, visibility: hidden
02position: static (default), relative, absolute, fixed, sticky
03z-index dan stacking context
04Centering: margin auto (horizontal block), transform: translate(-50%,-50%) (center mutlak)
05float dan clear — legacy, untuk pemahaman
06Praktik: sticky header dan floating button

💡Penjelasan Konsep

Konsep 1

Lima Nilai Position CSS

static (default): mengikuti alur normal dokumen, tidak bisa digeser. relative: posisi normal tapi bisa digeser dengan top/left/right/bottom (ruang aslinya tetap ada). absolute: dilepas dari alur dokumen, posisinya relatif ke ancestor dengan position bukan static. fixed: menempel ke viewport, tidak bergerak saat scroll. sticky: campuran relative dan fixed — menempel saat mencapai posisi tertentu saat scroll.

css

/* Relative: tetap di alur, bisa digeser */
.label {
  position: relative;
  top: -4px; /* geser ke atas 4px */
}

/* Absolute: relatif ke parent yang punya position */
.badge {
  position: absolute;
  top: 12px;
  right: 12px;
}
/* Parent harus: */
.kartu {
  position: relative; /* ← wajib agar badge absolute relatif ke sini */
}

/* Fixed: menempel ke layar */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

/* Sticky: menempel saat scroll */
header {
  position: sticky;
  top: 0; /* menempel di atas saat mencapai batas atas */
  z-index: 100;
}

Konsep 2

Z-index — Urutan Tumpukan

z-index mengontrol urutan tumpukan elemen yang saling overlapping. Nilai lebih besar = di atas. Default z-index adalah auto (setara 0). PENTING: z-index HANYA bekerja pada elemen yang punya position selain static. Jika elemen tidak bisa naik meski z-index besar, cek dulu apakah ia punya position.

css

/* z-index hanya bekerja dengan position */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

.modal {
  position: fixed;
  z-index: 200; /* di atas overlay */
}

.header {
  position: sticky;
  z-index: 50; /* di bawah overlay & modal */
}

💻Contoh Kode Lengkap

css

/* Sticky Header */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Absolute: badge di atas kartu */
.kartu {
  position: relative; /* Jadi konteks untuk anak absolute */
}
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

/* Fixed: tombol kembali ke atas */
.btn-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: #1A4A8A;
  border-radius: 50%;
}

⚡Latihan Kelas · Buat navigasi sticky di atas dan tombol "kembali ke atas" yang floating di pojok kanan bawah

Tambahkan position: sticky; top: 0; z-index: 100; ke <header>

Scroll halaman untuk memastikan header mengikuti scroll

Buat div.btn-top dengan position: fixed; bottom: 24px; right: 24px;

Tambahkan badge (angka notifikasi) absolute di atas kartu

Uji z-index: pastikan header tampil di atas konten saat scroll

📝 Tugas 3.4 — Display & Positioning

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat halaman dengan: (1) sticky navbar yang tidak hilang saat scroll, (2) hero section dengan teks yang di-center secara vertikal dan horizontal, (3) kartu dengan badge absolute di sudutnya, dan (4) floating action button fixed di pojok kanan bawah.

Kriteria Penilaian	Poin
Sticky navbar berfungsi saat halaman di-scroll	30
Badge absolute terpasang rapi di pojok kartu	25
Floating button fixed di pojok kanan bawah	25
Tidak ada elemen yang saling tumpuk secara tidak sengaja (z-index benar)	20
Total	100