Posisi Relatif Elemen dalam CSS

Posisi relatif ditetapkan dengan menggunakan nilai relative untuk properti position. Posisi seperti ini memungkinkan elemen digeser relatif terhadap posisi saat ini sebesar nilai yang ditentukan. Sementara itu, seluruh elemen halaman lainnya akan menganggap elemen tersebut berada di posisi semula. Artinya, dengan jenis posisi ini, elemen tidak keluar dari alur normal.

Pergeseran dari posisi saat ini ditentukan oleh properti top, right, bottom dan left.

Contoh

Pertama, mari buat dua blok tanpa penetapan posisi:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Sekarang tambahkan relative ke blok pertama. Sementara ini belum ada perubahan, karena kita belum menentukan pergeseran blok:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Sekarang mari geser blok kita sebesar 30px dari atas, dengan menetapkan properti top. Sementara itu, semua elemen lainnya akan bersikap seolah-olah blok kita tetap berada di tempat semula:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Mari kita juga geser blok kita sebesar 40px dari kiri, dengan menetapkan properti left:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	left: 40px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Nilai negatif dari properti top, right, bottom dan left menggeser ke arah sebaliknya. Misalnya, nilai positif top menggeser ke bawah, sedangkan nilai negatif - ke atas.

Mari geser blok kedua kita sebesar 40px ke atas, dengan menetapkan nilai negatif properti top:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Tugas Praktis

Diberikan blok-blok berikut:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Geser blok-blok ini menggunakan posisi relatif sebagai berikut: