Absolútne pozicionovanie prvkov v CSS

V tejto lekcii si rozoberieme absolútne pozicionovanie prvkov. Umožňuje umiestňovať prvky podľa zadaných súradníc stránky. Napríklad, môžeme umiestniť prvok na pozíciu 100px od hornej časti stránky a 200px z ľavej strany. Prvok sa presunie tam, bez ohľadu na to, čo sa tam nachádza, a jednoducho sa umiestni nad ne. Hovoríme, že pri tom prvok vypadne z normálneho toku dokumentu: všetky ostatné prvky sa budú správať tak, ako keby náš prvok neexistoval.

Aby sme vytvorili absolútne pozicionovaný prvok, tomuto prvku je potrebné nastaviť vlastnosť position na hodnotu absolute. Okrem tejto vlastnosti sú potrebné ešte dve: jedna bude nastavovať súradnicu po vertikále a druhá - po horizontále.

Pre vertikálu je potrebné nastaviť odstup alebo zhora, alebo zdola. Odstup zhora nastavuje vlastnosť top, a odstup zdola - vlastnosť bottom. Pre horizontálu je potrebné nastaviť odstup alebo zľava, alebo sprava. Odstup zľava nastavuje vlastnosť left, a odstup sprava - vlastnosť right.

Pozrime sa na príklady.

Príklad

Na začiatok si jednoducho vytvorme dva bloky bez pozicionovania (venujte pozornosť tomu, že prvky nie sú pritlačené k okraju okna, pretože body má štandardne nastavený 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;
}

Príklad

Teraz zelenému bloku nastavme absolútne pozicionovanie, umiestnime ho na pozíciu zhora 150px a zľava 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;
}

Príklad

Teraz umiestnime zelený blok na pozíciu 0px zhora a 0px zľava:

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

Príklad

Teraz umiestnime zelený blok na pozíciu 0px zhora a 0px sprava:

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

Príklad

Teraz umiestnime zelený blok na pozíciu 0px zdola a 0px sprava:

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

Príklad

Teraz umiestnime zelený blok na pozíciu 0px zdola a 0px zľava:

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

Praktické úlohy

Pomocou absolútneho pozicionovania umiestnite bloky nasledovne: