Pemposisian Mutlak Unsur dalam CSS

Dalam pelajaran ini, kita akan menganalisis pemposisian mutlak unsur. Ia membolehkan anda meletakkan unsur mengikut koordinat halaman yang ditentukan. Sebagai contoh, anda boleh meletakkan unsur pada kedudukan 100px dari atas halaman dan 200px dari kiri. Unsur akan bergerak ke sana, tanpa mengira unsur lain yang berada di sana dan akan terletak di atasnya. Dikatakan bahawa dalam kes ini, unsur tercicir daripada aliran normal dokumen: semua unsur lain akan berkelakuan seolah-olah unsur kita tidak ada.

Untuk menjadikan unsur diposisikan secara mutlak, unsur tersebut perlu ditetapkan sifat position kepada nilai absolute. Selain sifat ini, dua lagi diperlukan: satu akan menentukan koordinat menegak, dan satu lagi - mengufuk.

Untuk menegak, anda perlu menetapkan jarak sama ada dari atas, atau dari bawah. Jarak dari atas ditetapkan oleh sifat top, dan jarak dari bawah - oleh sifat bottom. Untuk mengufuk, anda perlu menetapkan jarak sama ada dari kiri, atau dari kanan. Jarak dari kiri ditetapkan oleh sifat left, dan jarak dari kanan - oleh sifat right.

Mari kita lihat contoh.

Contoh

Pertama, mari kita buat dua blok tanpa pemposisian (perhatikan bahawa unsur tidak dilekatkan ke tepi tetingkap, kerana body mempunyai margin secara lalai):

<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 tetapkan pemposisian mutlak kepada blok hijau, meletakkannya pada kedudukan 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 letak blok hijau pada kedudukan 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 letak blok hijau pada kedudukan 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 letak blok hijau pada kedudukan 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 letak blok hijau pada kedudukan 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 Praktikal

Menggunakan pemposisian mutlak, letakkan blok seperti berikut: