Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

CSS Positioning: Memahami Static, Relative, dan Absolute

Secara default, elemen HTML mengikuti aliran normal dari atas ke bawah. Namun, dengan properti position, kita bisa melanggar aturan tersebut untuk menciptakan desain yang lebih dinamis.

1. Position: Static (Bawaan)

Ini adalah nilai default untuk setiap elemen HTML.

• Perilaku: Elemen mengikuti aliran normal dokumen.

• Koordinat: Properti top, right, bottom, left, dan z-index tidak berfungsi pada posisi ini.

• Kegunaan: Digunakan jika Anda ingin mengembalikan elemen ke posisi normalnya.

2. Position: Relative

Elemen tetap berada di aliran dokumen, namun bisa "digeser" dari posisi aslinya.

• Perilaku: Elemen dipindahkan menggunakan koordinat (top, left, dll) relatif terhadap posisi aslinya.

• Efek Layout: Meskipun elemen berpindah secara visual, ruang yang ditinggalkannya tetap kosong dan tidak ditempati oleh elemen lain (seperti "bayangan" yang tertinggal).

• Kegunaan Utama: Sering digunakan sebagai jangkar (anchor) untuk elemen anak yang berposisi absolute.

3. Position: Absolute

Ini adalah properti yang paling kuat sekaligus menantang.

• Perilaku: Elemen keluar dari aliran dokumen (elemen lain akan menganggapnya tidak ada).

• Koordinat: Elemen dipindahkan relatif terhadap induk terdekat nya yang memiliki posisi selain static (biasanya induk yang diberi position: relative).

• Jika tidak ada induk yang cocok: Ia akan memposisikan diri relatif terhadap elemen (layar browser).

Tutorial: Membuat Badge Notifikasi dengan Absolute Positioning

Mari kita praktikkan bagaimana relative dan absolute bekerja sama. Kita akan membuat sebuah ikon lonceng dengan angka notifikasi di pojoknya.

Struktur HTML

<div class="icon-wrapper"> <div class="bell-icon">🔔div> <span class="notification-badge">5span>
div>

Kode CSS

/* Induk harus Relative agar menjadi acuan bagi si anak */
.icon-wrapper { position: relative; width: 50px; height: 50px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 8px;
} .bell-icon { font-size: 24px;
} /* Anak menggunakan Absolute untuk diletakkan di pojok */
.notification-badge { position: absolute; top: -5px; /* Geser ke atas melewati batas induk */ right: -5px; /* Geser ke kanan melewati batas induk */ background-color: red; color: white; font-size: 12px; padding: 2px 6px; border-radius: 50%; font-weight: bold;
}

Ringkasan Perbedaan

Tips Pro untuk Developer

1. Jangan Lupakan Relative: Jika Anda memberikan position: absolute pada elemen anak tapi lupa memberikan position: relative pada induknya, elemen anak tersebut mungkin akan melompat ke pojok layar browser.

2. Gunakan Z-Index: Saat elemen bertumpukan menggunakan absolute, gunakan properti z-index untuk mengatur mana yang berada di paling depan.

3. Hati-hati dengan Responsif: Penggunaan absolute yang berlebihan bisa menyulitkan saat membuat tampilan mobile jika tidak diperhitungkan dengan matang.

Konsep ini akan sangat berguna saat Anda menyempurnakan UI untuk portal SatuMedia, terutama untuk elemen seperti label "Trending" atau "Hot News" di atas gambar artikel.