Absolutní pozicování prvků v CSS

V této lekci si rozebereme absolutní pozicování prvků. Umožňuje umístit prvky na zadané souřadnice stránky. Například lze umístit prvek na pozici 100px od horního okraje stránky a 200px od levého okraje. Prvek se tam přesune, bez ohledu na to, co se tam bude nacházet a jednoduše se umístí nad ně. Říká se, že při tom prvek vypadne z normálního toku dokumentu: všechny ostatní prvky se budou chovat tak, jako by náš prvek neexistoval.

Abyste provedli absolutní pozicování prvku, je nutno tomuto prvku nastavit vlastnost position na hodnotu absolute. Kromě této vlastnosti jsou potřeba ještě dvě: jedna bude nastavovat souřadnici vertikálně a druhá - horizontálně.

Pro vertikálu je nutno nastavit odstup buď shora, nebo zdola. Odstup shora nastavuje vlastnost top, a odstup zdola - vlastnost bottom. Pro horizontálu je nutno nastavit odstup buď zleva, nebo zprava. Odstup zleva nastavuje vlastnost left, a odstup zprava - vlastnost right.

Podívejme se na příkladech.

Příklad

Nejprve si jednoduše vytvořme dva bloky bez pozicování (všimněte si toho, že prvky nejsou přitisknuty k okraji okna, neboť body má margin nastavený ve výchozím stavu):

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

Příklad

Nyní zelenému bloku nastavme absolutní pozicování, umístěním na pozici 150px shora a 100px zleva:

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

Příklad

Nyní umístěme zelený blok na pozici 0px shora a 0px zleva:

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

Příklad

Nyní umístěme zelený blok na pozici 0px shora a 0px zprava:

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

Příklad

Nyní umístěme zelený blok na pozici 0px zdola a 0px zprava:

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

Příklad

Nyní umístěme zelený blok na pozici 0px zdola a 0px zleva:

<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

Pomocí absolutního pozicování umístěte bloky následujícím způsobem: