Posisi Relatif terhadap Induk di CSS

Jika elemen diberikan relative, dan elemen turunannya - absolute, maka turunan ini akan diposisikan relatif terhadap induknya, bukan relatif terhadap jendela browser.

Biasanya, dalam kasus seperti ini, induk ditentukan relative tanpa pergeseran. Dalam hal ini, tidak ada yang terjadi pada induk ini, tetapi semua elemen turunannya sekarang akan diposisikan relatif terhadapnya.

Mari kita lihat contohnya.

Contoh

Pertama, mari kita buat blok-induk dan blok-turunan tanpa posisi:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Contoh

Sekarang mari kita posisikan blok hijau secara absolut. Karena induk tidak diberikan relative, maka turunan akan diposisikan relatif terhadap jendela browser:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Contoh

Sekarang mari kita berikan induk relative. Dalam kasus ini, turunan akan diposisikan relatif terhadap induknya:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Tugas Praktis

Dalam tugas-tugas berikut, blok utama berada di tengah menggunakan margin dengan nilai auto, sedangkan yang lainnya diposisikan relatif terhadapnya menggunakan properti position.