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í:

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

css#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:

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

css#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ě:

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

css#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:

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

css#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:

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

css#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

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

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