Posisi Absolut Elemen dalam CSS

Dalam pelajaran ini, kita akan membahas posisi absolut elemen. Ini memungkinkan untuk menempatkan elemen sesuai koordinat yang ditentukan pada halaman. Misalnya, kita dapat menempatkan elemen pada posisi 100px dari atas halaman dan 200px dari kiri. Elemen akan berpindah ke sana, terlepas dari elemen lain yang ada di sana dan akan berada di atasnya. Dikatakan bahwa dalam hal ini elemen keluar dari aliran normal dokumen: semua elemen lainnya akan berperilaku seolah-olah elemen kita tidak ada.

Untuk membuat elemen diposisikan secara absolut, elemen tersebut perlu diberikan properti position dengan nilai absolute. Selain properti ini, diperlukan dua properti lagi: satu untuk menentukan koordinat vertikal, dan yang lainnya - untuk horizontal.

Untuk vertikal, perlu ditentukan jarak baik dari atas, atau dari bawah. Jarak dari atas ditentukan oleh properti top, dan jarak dari bawah - oleh properti bottom. Untuk horizontal, perlu ditentukan jarak baik dari kiri, atau dari kanan. Jarak dari kiri ditentukan oleh properti left, dan jarak dari kanan - oleh properti right.

Mari kita lihat contohnya.

Contoh

Pertama, mari kita buat dua blok tanpa posisi (perhatikan bahwa elemen tidak menempel ke tepi jendela, karena body memiliki margin secara default):

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

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

Contoh

Sekarang mari kita beri posisi absolut pada blok hijau, dengan menempatkannya pada posisi 150px dari atas dan 100px dari kiri:

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

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

Contoh

Sekarang mari kita tempatkan blok hijau pada posisi 0px dari atas dan 0px dari kiri:

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

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

Contoh

Sekarang mari kita tempatkan blok hijau pada posisi 0px dari atas dan 0px dari kanan:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Contoh

Sekarang mari kita tempatkan blok hijau pada posisi 0px dari bawah dan 0px dari kanan:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Contoh

Sekarang mari kita tempatkan blok hijau pada posisi 0px dari bawah dan 0px dari kiri:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tugas Praktis

Dengan menggunakan posisi absolut, tempatkan blok-blok sebagai berikut: