Фиксирано позициониране в 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;
}