Penetapan Kedudukan Tetap dalam CSS

Sekarang kita akan memahami penetapan kedudukan tetap. Ia adalah serupa dengan penetapan kedudukan mutlak, perbezaannya muncul dalam cara jenis penetapan kedudukan ini berkelakuan apabila terdapat bar kilir.

Apabila halaman dikilir, elemen yang diletakkan secara mutlak akan ikut dikilir bersama halaman. Lihat contoh:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}

Kita boleh membuat supaya apabila halaman dikilir, elemen yang diletakkan kekal di tempatnya. Untuk ini, kita perlu menetapkan kedudukan tetap kepadanya menggunakan sifat position dengan nilai fixed:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: fixed; /* menetapkan kedudukan tetap */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}