Apa itu position absolute pada css?

Hai semua, saya baru belajar css. sebelumnya udah nonton video tutoral tentang hal ini. cuma di video itu tidak menjelaskan perbedaan position absolute dengan parent relative, fixed, dan absolute. Jd sebenarnya apa sih bedanya? kalau bisa kasih contoh juga ya. makasih

Ini saya coba rangkum bedanya: 1. Static = posisi apa adanya tidak bisa diatur (bukan margin & paddingnya tapi top, left, right, bottomnya, dan z-indexnya), kena scroll 2. Relative = posisi bisa diatur, kena scroll, posisi awal dianggap ada 3. Absolute = posisi bisa diatur, kena scroll, posisi awal dianggap hilang 4. Fixed = posisi bisa diatur, anti scroll, posisi awal dianggap hilang. Kalau masalah contohnya silahkan uji coba sendiri, karena terlalu abstrak bila hanya dijelaskan seperti ini. Lakukan uji coba: - parent static - child relative - parent relative - child static - parent static - child absolute - parent absolute - child static dan seterusnya. uji coba sampai berpuluh2 kali hingga agan benar2 dapat bedanya.

See the Pen ecvGL by Dumet_School (@dumet_school) on CodePen.

Perhatikan code pada gambar di atas jika id red tidak di kasih position relative maka id yellow akan berpindah ke pojok kiri atas pada jendela browser karena defaultnya body adalah relative. Dan jika id red di beri postion relative maka id yellow akan mengikuti id red yang telah di beri position relative membentuk titik nol pada id red yaitu pojok kiri atas #red.

CSS ini sangat masuk akal dan membuat penggunanya mampu mengexplore kustomisasi dengan bebas tanpa batas. Secara teknis relative menjadi wadah untuk sebuah benda atau nilai lain dalam CSS dan absolute dapat memposisikan dirinya bebas pada wadah (relative).

Mereka berdua ini merupakan deklarasi posisi (posistion:) pada CSS, jadi pastikan penggunaannya dalam nilai position:.

Deklarasi ini mendukung penuh penggayaan (styling) yang kalian inginkan untuk sebuah element HTML yang digunakan melalui CSS. Cara kerja relative ini menjadi wadah yang relevan untuk element lain (kalo ada position: absolute;) ketika kalian menggunakannya dalam dokumen HTML.

ads by posciety

Ketika kalian menggunakan

ul {
	position: relative;
	top: 15px;
	right: 20px;
}

Baca Juga:

7 Cara Mudah Membuat Situs WordPress Mobile Friendly

4 Tren UX Design di Tahun 2021

12 Plugin WordPress Gratis & Terbaik 2021 yang Wajib Kamu Miliki

Cara Mengetahui Kata-Kunci yang Dipakai oleh Pengunjung pada Fitur…

Posisi relative memisahkan diri dari aliran / jalur dokumen HTML (posisi yang sudah diatur ketika membuat dokumen HTML) tapi kalo menggunakan posisi absolute setelah relative maka posisi relative akan menjadi wadah untuk posisi absolute dan posisi absolute dapat bergerak bebas didalam wadah (relative) maka penggunaan absolute harus ada posisi relative sebelumnya. Kode yang biasa kalian gunakan dalam posisi absolute pasti seperti ini (contoh):

ul ul {
	position: absolute;
	top: 15px;
	right: 20px;
}

Maka posisi

menu {
	position: relative;
}

menu {
	position: relative;
}

menu {
	position: relative;
}

menu {
	position: relative;
}

menu {
	position: relative;
}

Sedangkan relative tetap mampu menampilkan diri tanpa absolute, misalnya:

ul {
	position: relative;
	top: 15px;
	right: 20px;
}

Dia akan berada pada posisi atas

menu {
	position: relative;
}

menu {
	position: relative;
}

ul {
	position: relative;
	top: 15px;
	right: 20px;
}

menu {
	position: relative;
}

Kemudian kita gunakan style position: absolute; di element lain maka si absolute dapat muncul dan kita atur posisinya sesuai keinginan seperti kode absolute diatas sebelumnya.

Deklarasi ini biasa digunakan untuk kalian yang ingin memposisikan suatu element diatas element lain, misalnya menimpa text diatas gambar.

Apa itu static dan relatif?

Apa itu position absolute dan relative?

Apa itu position fixed?

Z Index itu apa?