Фиксирано позиционирање во CSS

Сега ќе се занимаваме со фиксираното позиционирање. Слично е на апсолутното, разликата се манифестира во тоа како се однесуваат овие типови на позиционирање во присуство на лента за лизгање.

При лизгање на страната, апсолутно позиционираните елементи ќе се лизгаат заедно со страната. Погледнете го примерот:

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

Може да се направи така што при лизгање на страната, позиционираниот елемент да остане на место. За ова, потребно е да му се зададе фиксирано позиционирање со помош на својството position со вредност fixed:

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

#elem {
	position: fixed; /* задаваме фиксирано позиционирање */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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