Фіксаванае пазіцыянаванне ў 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;
}