Fixní pozicování v CSS

Nyní si rozebereme fixní pozicování. Je podobné absolutnímu, rozdíl se projevuje v tom, jak se tyto typy pozicování chovají při přítomnosti posuvníku.

Při posouvání stránky se absolutně pozicované prvky budou posouvat spolu se stránkou. Podívejte se na pří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;
}

Lze udělat to, aby se při posouvání stránky pozicovaný prvek zůstal na místě. K tomu je mu potřeba zadat fixní pozicování pomocí vlastnosti position s hodnotou fixed:

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

#elem {
	position: fixed; /* nastavíme fixní pozicování */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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