Fast positionering i CSS

Nu ska vi gå igenom fast positionering. Det liknar absolut positionering, skillnaden visar sig i hur dessa positioneringstyper beter sig i närvaro av ett rullningsfält.

När sidan rullas kommer absolut positionerade element att rullas tillsammans med sidan. Se exemplet:

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

Man kan göra så att när sidan rullas förblir det positionerade elementet kvar på sin plats. För detta behöver det tilldelas fast positionering med egenskapen position med värdet fixed:

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

#elem {
	position: fixed; /* sätter fast positionering */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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