Fiksno pozicioniranje u CSS-u

Sada ćemo se pozabaviti fiksnim pozicioniranjem. Slično je apsolutnom, a razlika se pokazuje u tome kako se ove vrste pozicioniranja ponašaju u prisustvu trake za skrolovanje.

Prilikom skrolovanja stranice, apsolutno pozicionirani elementi će se skrolovati zajedno sa stranicom. Pogledajte primer:

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

Možete učiniti da se prilikom skrolovanja stranice pozicionirani element zadrži na mestu. Za to mu treba zadati fiksno pozicioniranje pomoću svojstva position sa vrednošću fixed:

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

#elem {
	position: fixed; /* zadajemo fiksno pozicioniranje */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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