Poziționarea fixă în CSS

Acum vom înțelege poziționarea fixă. Este similară cu cea absolută, diferența se manifestă în modul în care aceste tipuri de poziționare se comportă în prezența unei bare de derulare.

La derularea paginii, elementele poziționate absolut se vor derula împreună cu pagina. Urmăriți exemplul:

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

Se poate face astfel încât la derularea paginii, elementul poziționat să rămână pe loc. Pentru aceasta, trebuie să i se atribuie poziționare fixă folosind proprietatea position cu valoarea fixed:

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

#elem {
	position: fixed; /* setăm poziționarea fixă */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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