Elementu absolūtā pozicionēšana CSS

Šajā nodarbībā mēs analizēsim absolūto elementu pozicionēšanu. Tas ļauj izvietot elementus norādītajās lapas koordinātēs. Piemēram, var izvietot elementu pozīcijā 100px no lapas augšas un 200px no kreisās puses. Elements pārvietosies tur, neņemot vērā to, ka tur atradīsies citi elementi un vienkārši novietosies virs tiem. Saka, ka šajā gadījumā elements izkrīt no normālā dokumenta plūsmas: visi pārējie elementi uzvedīsies tā, it kā mūsu elementa nebūtu.

Lai padarītu elementu absolūti pozicionētu, šim elementam ir jāiestata īpašība position ar vērtību absolute. Papildus šai īpašībai, ir vajadzīgas vēl divas: viena noteiks koordinātu vertikāli, bet otra - horizontāli.

Vertikālei jāiestata atkāpe vai no augšas, vai no apakšas. Atkāpi no augšas nosaka īpašība top, bet atkāpi no apakšas - īpašība bottom. Horizontālei jāiestata atkāpe vai no kreisās puses, vai no labās puses. Atkāpi no kreisās puses nosaka īpašība left, bet atkāpi no labās puses - īpašība right.

Apskatīsim piemērus.

Piemērs

Vispirms vienkārši izveidosim divus blokus bez pozicionēšanas (pievērsiet uzmanību tam, ka elementi nav piespiesti pie loga malas, jo body pēc noklusējuma ir margin):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Piemērs

Tagad zaļajam blokam iestatīsim absolūto pozicionēšanu, novietojot to pozīcijā no augšas 150px un no kreisās puses 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Piemērs

Tagad novietosim zaļo bloku pozīcijā 0px no augšas un 0px no kreisās puses:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Piemērs

Tagad novietosim zaļo bloku pozīcijā 0px no augšas un 0px no labās puses:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Piemērs

Tagad novietosim zaļo bloku pozīcijā 0px no apakšas un 0px no labās puses:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Piemērs

Tagad novietosim zaļo bloku pozīcijā 0px no apakšas un 0px no kreisās puses:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktiskie uzdevumi

Izmantojot absolūto pozicionēšanu, izvietojiet blokus šādi: