Fiksētā pozicionēšana CSS

Tagad mēs izskatīsim fiksēto pozicionēšanu. Tā ir līdzīga absolūtajai, atšķirība parādās tajā, kā šie pozicionēšanas veidi uzvedas, ja ir ritjosla.

Ritinot lapu, absolūti pozicionēti elementi ritināsies kopā ar lapu. Skatieties piemēru:

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

Var izdarīt tā, lai, ritinot lapu, pozicionētais elements paliktu savā vietā. Lai to izdarītu, tam jāpiešķir fiksēta pozicionēšana, izmantojot īpašību position ar vērtību fixed:

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

#elem {
	position: fixed; /* piešķiram fiksēto pozicionēšanu */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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