CSS Dasar #20 - Position Absolute

byFerdian Rahabista -
0

Setelah memahami position: static dan position: relative, sekarang saatnya mempelajari position: absolute. Nilai ini mengeluarkan elemen dari aliran normal dokumen (normal flow) dan memposisikannya relatif terhadap ancestor terdekat yang memiliki position non-static (relative, absolute, fixed, atau sticky).

Apa Itu Position Absolute?

position: absolute membuat elemen tidak lagi mengikuti aliran normal dokumen. Elemen lain akan mengabaikannya dan ruang asli elemen absolute hilang (tidak dipertahankan seperti pada relative). Posisi elemen absolute ditentukan oleh properti top, right, bottom, left relatif terhadap ancestor terdekat yang memiliki position non-static. Jika tidak ada ancestor non-static, maka relatif terhadap <body> (viewport).

Ciri-ciri Position Absolute:
  • Elemen keluar dari normal flow (tidak mempengaruhi posisi elemen lain).
  • Ruang asli hilang (elemen lain akan mengisi posisinya).
  • Posisi ditentukan relatif terhadap ancestor terdekat yang non-static (relative, absolute, fixed, sticky).
  • Jika tidak ada ancestor non-static, posisi relatif terhadap viewport (<body>).
  • Dapat menggunakan top, right, bottom, left untuk mengatur posisi.
  • Lebar elemen absolute tidak lagi 100% seperti block biasa, tetapi selebar konten (kecuali diatur width).

1. Absolute Tanpa Ancestor Non-static

Jika tidak ada ancestor dengan position non-static, elemen absolute akan diposisikan relatif terhadap <body> (viewport).

Contoh:

<style>
    .absolute-box {
        position: absolute;
        top: 50px;
        left: 50px;
        background: #ef4444;
        color: white;
        padding: 15px;
    }
    .normal-box {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 10px;
    }
</style>

<div class="normal-box">Kotak normal (static)</div>
<div class="absolute-box">Absolute (top:50px, left:50px)</div>
<div class="normal-box">Kotak normal lain - elemen absolute tidak mempengaruhi posisinya</div>
Kotak normal (static)
Absolute (top:60px, left:30px) relatif terhadap viewport
Kotak normal lain - tidak terpengaruh, ruang absolute hilang

Kotak absolute keluar dari aliran normal, menumpang di atas elemen lain.

Perbedaan dengan Relative:
- Relative: ruang asli tetap dipertahankan, elemen lain tidak mengisi celah.
- Absolute: ruang asli hilang, elemen lain akan mengisi posisi semula.

2. Absolute dengan Ancestor Relative (Paling Umum)

Praktik terbaik: letakkan elemen absolute di dalam container yang memiliki position: relative. Dengan ini, posisi absolute akan relatif terhadap container tersebut, bukan viewport.

Contoh:

<style>
    .relative-container {
        position: relative;
        background: #f0f4f8;
        padding: 20px;
        min-height: 150px;
        border: 2px dashed #3b82f6;
    }
    .inside-absolute {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: #22c55e;
        color: white;
        padding: 8px 15px;
        border-radius: 5px;
    }
</style>

<div class="relative-container">
    <p>Container ini memiliki position: relative. Elemen absolute di dalamnya akan diposisikan relatif terhadap container ini.</p>
    <div class="inside-absolute">Absolute di kanan bawah container</div>
</div>

Container position: relative. Elemen absolute di dalamnya diposisikan relatif terhadap container ini.

Absolute

Absolute diposisikan di kanan bawah container relative.

Praktik Terbaik: Selalu gunakan container relative untuk membatasi ruang gerak elemen absolute. Ini sangat berguna untuk membuat tooltip, badge, modal, dropdown, dll.

3. Mengatur Posisi dengan Top, Right, Bottom, Left

Properti top, right, bottom, left menentukan jarak dari sisi container (ancestor non-static).

  • top: 0; → ditempelkan ke sisi atas container.
  • right: 0; → ditempelkan ke sisi kanan container.
  • bottom: 0; → ditempelkan ke sisi bawah container.
  • left: 0; → ditempelkan ke sisi kiri container.
  • Kombinasi top: 0; left: 0; → pojok kiri atas.
  • Kombinasi bottom: 0; right: 0; → pojok kanan bawah.

Contoh Berbagai Posisi Absolute:

<style>
    .parent {
        position: relative;
        background: #f0f4f8;
        height: 200px;
        width: 100%;
        border: 2px solid #ccc;
    }
    .top-left { position: absolute; top: 0; left: 0; background: #3b82f6; color: white; padding: 5px 10px; }
    .top-right { position: absolute; top: 0; right: 0; background: #ef4444; color: white; padding: 5px 10px; }
    .bottom-left { position: absolute; bottom: 0; left: 0; background: #22c55e; color: white; padding: 5px 10px; }
    .bottom-right { position: absolute; bottom: 0; right: 0; background: #f59e0b; color: white; padding: 5px 10px; }
    .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #8b5cf6; color: white; padding: 8px 15px; }
</style>

<div class="parent">
    <div class="top-left">Top Left</div>
    <div class="top-right">Top Right</div>
    <div class="bottom-left">Bottom Left</div>
    <div class="bottom-right">Bottom Right</div>
    <div class="center">Center</div>
</div>
Top Left
Top Right
Bottom Left
Bottom Right
Center

Elemen absolute diposisikan di berbagai sudut container relative.

Tips Memusatkan Elemen Absolute: 
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Ini adalah cara paling umum untuk memusatkan elemen absolute secara horizontal dan vertikal.

Contoh Proyek: Tooltip, Badge, dan Modal dengan Absolute

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position Absolute - Tooltip, Badge, Modal</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 10px;
        }
        
        /* DEMO 1: Tooltip */
        .tooltip-demo {
            display: inline-block;
            position: relative;
            margin: 20px;
        }
        
        .tooltip-trigger {
            background: #3b82f6;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-block;
        }
        
        .tooltip-text {
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            display: none;
            z-index: 10;
        }
        
        .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
        }
        
        .tooltip-demo:hover .tooltip-text {
            display: block;
        }
        
        /* DEMO 2: Badge */
        .badge-demo {
            position: relative;
            display: inline-block;
            margin: 20px;
        }
        
        .icon {
            font-size: 48px;
            background: #f0f4f8;
            padding: 15px;
            border-radius: 50%;
        }
        
        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }
        
        /* DEMO 3: Modal */
        .modal-trigger {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
        }
        
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 25px;
            width: 90%;
            max-width: 400px;
            text-align: center;
        }
        
        .modal-close {
            background: #ef4444;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 15px;
        }
        
        /* INFO BOX */
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 30px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #e2e8f0;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Position Absolute dalam Aksi</h1>
        
        <!-- DEMO 1: Tooltip -->
        <div style="margin-bottom: 30px;">
            <h2>1. Tooltip dengan Absolute</h2>
            <div class="tooltip-demo">
                <span class="tooltip-trigger">Hover untuk tooltip</span>
                <span class="tooltip-text">Ini adalah tooltip keren!</span>
            </div>
            <p>Tooltip diposisikan absolute relatif terhadap trigger (relative container). Muncul saat hover.</p>
        </div>
        
        <hr>
        
        <!-- DEMO 2: Badge Notifikasi -->
        <div style="margin-bottom: 30px;">
            <h2>2. Badge Notifikasi dengan Absolute</h2>
            <div class="badge-demo">
                <div class="icon">🔔</div>
                <div class="badge">3</div>
            </div>
            <p>Badge (angka 3) diposisikan absolute di pojok kanan atas icon.</p>
        </div>
        
        <hr>
        
        <!-- DEMO 3: Modal Popup -->
        <div style="margin-bottom: 30px;">
            <h2>3. Modal Popup dengan Fixed (seperti absolute terhadap viewport)</h2>
            <button class="modal-trigger" id="openModalBtn">Buka Modal</button>
            <div id="modal" class="modal-overlay">
                <div class="modal-content">
                    <h3>Ini Modal Popup</h3>
                    <p>Modal ini menggunakan position: fixed (mirip absolute terhadap viewport).</p>
                    <button class="modal-close" id="closeModalBtn">Tutup</button>
                </div>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Ringkasan Position Absolute</h3>
            <ul>
                <li>Elemen keluar dari normal flow (ruang asli hilang).</li>
                <li>Posisi relatif terhadap ancestor terdekat yang non-static (relative, absolute, fixed, sticky).</li>
                <li>Jika tidak ada ancestor non-static, relatif terhadap viewport.</li>
                <li>Gunakan container relative untuk membatasi area posisi absolute.</li>
                <li>Kombinasi top: 50%; left: 50%; transform: translate(-50%, -50%); untuk memusatkan elemen.</li>
                <li>Absolute sangat berguna untuk tooltip, badge, modal, dropdown, dan overlay.</li>
            </ul>
        </div>
    </div>

    <script>
        const openBtn = document.getElementById('openModalBtn');
        const modal = document.getElementById('modal');
        const closeBtn = document.getElementById('closeModalBtn');
        
        if (openBtn && modal && closeBtn) {
            openBtn.addEventListener('click', () => {
                modal.style.display = 'flex';
            });
            closeBtn.addEventListener('click', () => {
                modal.style.display = 'none';
            });
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });
        }
    </script>

</body>
</html>

Hasil visual halaman demo:

Tooltip dengan Absolute

Hover untuk tooltip Tooltip keren!
Ringkasan: Absolute keluar dari aliran normal, diposisikan relatif terhadap ancestor non-static.

Perbandingan Static, Relative, dan Absolute

Aspek Static Relative Absolute
Normal flow Ya Ya (ruang asli tetap) Tidak (keluar)
Dapat digeser Tidak Ya (relative to itself) Ya (relative to ancestor)
Ruang asli dipertahankan Ya Ya Tidak
Anchor untuk absolute child Tidak Ya (paling umum) Ya

Kesalahan Umum Pemula

  • Lupa memberi position: relative pada container → Absolute akan relatif terhadap viewport, bukan container yang diinginkan.
  • Mengira absolute masih mempengaruhi elemen lain → Absolute keluar dari aliran normal, jadi tidak mempengaruhi posisi elemen lain.
  • Menggunakan absolute tanpa menentukan top/left → Elemen akan tetap di posisi asalnya (tapi keluar dari flow).
  • Tertukar arah posisi → top: 0 menempel ke atas container, bottom: 0 ke bawah.
  • Lupa bahwa lebar absolute tidak full-width → Lebar absolute selebar konten; atur width: 100% jika ingin full.
Debugging Tips:
  • Gunakan Developer Tools (F12) → inspect elemen absolute → lihat nilai top/left dan relative container.
  • Jika elemen absolute tidak berada di posisi yang diinginkan, cek apakah container ancestor sudah memiliki position: relative.
  • Tambahkan border sementara pada container relative untuk melihat batas area.

Latihan Singkat

  1. Buat container relative dengan tinggi 200px, lalu buat elemen absolute di pojok kanan bawah.
  2. Buat badge notifikasi dengan angka di pojok kanan atas icon menggunakan absolute.
  3. Buat tooltip yang muncul saat hover menggunakan absolute dan pseudo-element ::after untuk segitiga.
  4. Buat elemen absolute yang dipusatkan di tengah container relative.
  5. Coba letakkan absolute tanpa container relative dan amati perbedaannya.

Intisari Hari Ini

  • position: absolute mengeluarkan elemen dari normal flow (ruang asli hilang).
  • Posisi absolut relatif terhadap ancestor terdekat yang non-static (relative, absolute, fixed, sticky).
  • Jika tidak ada ancestor non-static, posisi relatif terhadap viewport (<body>).
  • Container relative adalah anchor yang paling umum untuk absolute.
  • Gunakan top, right, bottom, left untuk menentukan posisi.
  • Trik memusatkan: top: 50%; left: 50%; transform: translate(-50%, -50%);
  • Absolute sangat berguna untuk tooltip, badge, modal, dropdown, overlay, dll.
Tantangan: Buat sebuah Kartu Produk dengan Badge Diskon dan Tooltip menggunakan position absolute! Persyaratan:
  • Kartu produk berisi gambar, nama produk, harga, dan tombol beli.
  • Tambahkan badge "Diskon 50%" di pojok kiri atas gambar (menggunakan absolute).
  • Tambahkan tooltip pada tombol "Beli" yang muncul saat hover (tooltip di atas tombol).
  • Tambahkan icon wishlist (hati) di pojok kanan atas gambar.
  • Semua elemen absolute harus berada dalam container relative yang sesuai.
  • Gunakan CSS Grid atau Flexbox untuk layout kartu.
  • Tambahkan kotak penjelasan tentang penggunaan absolute di setiap elemen.

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #19 - Position Static dan Relative
Artikel Selanjutnya: CSS Dasar #21 - Position Fixed dan Sticky

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال