Fixné pozícionovanie v CSS

Teraz si rozoberieme fixné pozícionovanie. Je podobné absolútnemu, rozdiel sa prejavuje v tom, ako sa tieto typy pozícionovania správajú pri prítomnosti posuvníka.

Pri posúvaní stránky sa absolútne pozicionované prvky budú posúvať spolu so stránkou. Pozrite si príklad:

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

Môžeme urobiť to, aby sa pri posúvaní stránky pozicionovaný prvok zostal na mieste. Na to mu treba zadať fixné pozícionovanie pomocou vlastnosti position s hodnotou fixed:

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

#elem {
	position: fixed; /* zadáme fixné pozícionovanie */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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