Memahami position: relative; & position: absolute; – HTML CSS

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.

Ketika kalian menggunakan position: relative artinya element tersebut memposisikan diri dari jarak dokumen HTML, sedangkan absolute memposisikan diri dari jendela browser dan mereka tumpang tindih ketika kalian menggunakannya bersamaan.

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 ul ul ini bisa kita atur sesuai keinginan dimana ingin menampilkan ul ul (harus ada position: relative; untuk menggunakan absolute). Pada kode diatas posisi jarak atas adalah 15px dan jarak kanannya 20px (dari jendela browser) dan dapat muncul ketika ada nilai relative di element lain.

Sedangkan relative tetap mampu menampilkan diri tanpa absolute, misalnya:

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

Dia akan berada pada posisi atas 15px dan kanan 15px (jarak dari dokumen HTML) dan tidak menjadi wadah untuk absolute jika tidak position: absolute pada element lain yang biasa diposisikan menindih si relative. Tapi ketika kalian ingin menggunakan position: relative sebagai wadah untuk absolute maka cukup tulis seperti ini (contoh element menu yang digunakan):

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.

Masih bingung ? Lihat : Video Tutorial Cara Membuat Tulisan Diatas Gambar – HTML CSS.

Selamat mencoba !