Posisi Tetap di CSS

Sekarang kita akan membahas tentang posisi tetap. Ini mirip dengan posisi absolut, perbedaannya terlihat dalam cara kedua jenis penempatan ini berperilaku ketika ada bilah gulir.

Saat halaman digulir, elemen yang diposisikan secara absolut akan ikut tergulir 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 dapat membuat elemen yang diposisikan agar tetap di tempatnya saat halaman digulir. Untuk melakukannya, kita perlu menetapkan posisi tetap menggunakan properti position dengan nilai fixed:

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

#elem {
	position: fixed; /* menetapkan posisi 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;
}