POSITION ABSOLUTE

Pada tutorial CSS ini, kita akan membahas tentang salah satu properti penting dalam CSS yang dikenal sebagai ‘position:absolute’. Properti ini memungkinkan kamu untuk menentukan posisi suatu elemen di halaman web dengan lebih presisi.

Apa Itu Position Absolute?

‘Position:absolute’ adalah properti CSS yang memungkinkan kamu untuk menempatkan elemen pada posisi tertentu di dalam kontainer terdekat atau jendela browser. Waktu kita menggunakan ‘position:absolute’, elemen akan keluar dari aliran normal dan bergerak sesuai koordinat yang ditetapkan oleh kamu.

Berikut penjelasan dari beberapa nilai properti ‘top’, ‘right’, ‘bottom’, dan ‘left’ saat dikombinasikan dengan ‘position:absolute’:

• top: Mengatur jarak elemen dari tepi atas kontainer (atau jendela browser) terdekat.
• right: Mengatur jarak elemen dari tepi kanan kontainer terdekat.
• bottom: Mengatur jarak elemen dari tepi bawah kontainer terdekat.
• left: Mengatur jarak dari elemen ke tepi kiri kontainer terdekat.

Contoh Penggunaan Position Absolute

Berikut ini adalah contoh sederhana bagaimana menggunakan ‘position:absolute’ dalam kode CSS kamu.

div {
    position: absolute;
    top: 50px;
    right: 30px;
}

Contoh di atas menunjukkan bagaimana mengatur posisi elemen ‘div’ sehingga jaraknya 50px dari tepi atas dan 30px dari tepi kanan kontainer terdekat, atau jendela browser jika tidak ada kontainer lain.

Position Absolute dan Kontainer Relatif

Elemen dengan ‘position:absolute’ akan mencari kontainer terdekat yang memiliki posisi selain ‘static’ untuk ditetapkan sebagai posisi acuan. Jika tidak ada kontainer seperti itu, jendela browser akan menjadi referensi posisi.

Kontainer dengan properti ‘position:relative’ sering digunakan sebagai kontainer acuan bagi elemen dengan ‘position:absolute’. Jadi, jika kamu ingin ‘position:absolute’ berfungsi relatif terhadap kontainer tertentu, pastikan untuk mengatur properti ‘position’ dari kontainer tersebut menjadi ‘relative’.

Berikut contoh penggunaannya:

.container {
    position: relative;
}

.absolute-element {
    position: absolute;
    top: 20px;
    left: 10px;
}

Dalam contoh di atas, elemen dengan kelas ‘.absolute-element’ akan diposisikan 20px dari tepi atas dan 10px dari tepi kiri kontainer ‘.container’, bukan dari jendela browser.