Relativní pozicování prvků v CSS

Relativní pozicování se nastavuje pomocí hodnoty relative pro vlastnost position. Takové pozicování umožňuje posouvat prvky vzhledem ke své aktuální pozici o zadanou hodnotu. Přitom všechny ostatní prvky na stránce budou uvažovat, že prvek je tam, kde byl původně. To znamená, že při tomto typu pozicování prvek nevypadne z normálního toku.

Posuny od aktuální pozice se nastavují vlastnostmi top, right, bottom a left.

Příklad

Nejprve si jednoduše vytvořme dva bloky bez pozicování:

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

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

Příklad

Nyní přidejme prvnímu bloku relative. Zatím se nic nezmění, protože jsme neurčili posun bloku:

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

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

Příklad

Nyní posuňme náš blok o 30px shora, tím, že mu nastavíme vlastnost top. Přitom se všechny ostatní prvky budou chovat tak, jako by náš blok zůstal na místě, kde byl původně:

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

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

Příklad

Zároveň posuňme náš blok o 40px zleva, tím, že mu nastavíme vlastnost left:

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

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

Příklad

Záporné hodnoty vlastností top, right, bottom a left posouvají v opačném směru. Například kladná hodnota top posouvá dolů, zatímco záporná - nahoru.

Posuňme náš druhý blok o 40px nahoru, tím, že mu nastavíme zápornou hodnotu vlastnosti top:

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

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Praktické úlohy

Jsou dány následující bloky:

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

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Posuňte tyto bloky pomocí relativního pozicování následujícím způsobem: