Gefikseerde Posisionering in CSS

Ons gaan nou gefikseerde posisionering ondersoek. Dit is soortgelyk aan absolute posisionering, die verskil kom na vore in hoe hierdie tipes posisionering optree in die teenwoordigheid van 'n rolstrook.

Wanneer die bladsy geskuif word, sal absoluut geposisioneerde elemente saam met die bladsy skuif. Kyk na die voorbeeld:

<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;
}

Jy kan dit so maak dat wanneer die bladsy geskuif word, die geposisioneerde element op sy plek bly. Om dit te doen, moet jy dit 'n gefikseerde posisionering gee deur die eienskap position op die waarde fixed te stel:

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

#elem {
	position: fixed; /* stel gefikseerde posisionering in */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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