Fastposisjonering i CSS

Nå skal vi se nærmere på fastposisjonering. Det ligner på absolutt posisjonering, forskjellen viser seg i hvordan disse posisjoneringstypene oppfører seg når det er en rullelinje.

Ved scrolling av siden vil absolutt posisjonerte elementer scrolle sammen med siden. Se eksempelet:

<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 gjøre det slik at ved scrolling av siden forblir det posisjonerte elementet på plass. For å gjøre dette må det tildeles fast posisjonering ved hjelp av egenskapen position med verdien fixed:

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

#elem {
	position: fixed; /* setter fast posisjonering */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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