6.2. Pozicování elementů na stránce

Ve výchozím nastavení jsou prvky na stránce umístěny jeden za druhým (včetně hodnot display). Někdy se však stává, že potřebujeme docílit efektu zobrazení jednoho prvku přes druhý. Naštěstí je jazyk CSS vybaven nástroji, které nám to umožňují. Této vlastnosti se říká pozicování.

K pozicování nám slouží vlastnost position, která může obsahovat následující hodnoty:

• static - výchozí hodnota pro každý prvek; není potřeba nastavovat
• relative - změní pozici prvku ve vztahu k sobě
• absolute - prvek je vyjmut ze své pozice a je umístěn ve vztahu k nejbližšímu nadřazenému elementu s vlastností position: relative;
• fixed - umístí prvek v pevné poloze vzhledem k okně prohlížeče. Například lišta Facebooku, kterou vždy vidíte v horní části okna, ať jste na stránce kdekoli.

Kromě pozice musíme prvku také říct souřadnice, dle kterých můžeme určit polohu prvku top, bottom, right a left.

Ukážeme si to na jednoduchém příkladu:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item item-relative"></div>
  <div class="item"></div>
</div>

.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  background: salmon;
}

.item-relative {
  background: lightblue;
  position: relative;
  top: -20px;
  right: 25px;
}

Ve výše uvedeném příkladu je použito relativní pozicování, tedy samo vzhledem k sobě.

Absolutní pozicování vyžaduje trochu opatrnosti, ale jakmile se naučíme, jak funguje, bude to hračka.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item item-absolute"></div>
  <div class="item"></div>
</div>

.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  background: salmon;
}

.item-absolute {
  background: lightblue;
  position: absolute;
  top: -20px;
  right: 25px;
}

Tento element byl vytrhnut ze svého místa a byl umístěn v pravé horní části dokumentu.

Pokud použijete absolutní umístění nedbale, může se stát, že se prvek bude objevovat v nečekaném místě. Musíme tedy mít na paměti pravidlo, že absolutně umístěný prvek je pozicován vůči jinému prvku - nejbližšímu nadřazenému prvku s position: relative;.

Podívejme se na příklad využití absolutního pozicování:

<div class="item"></div>
<div class="item item-outer">
  <div class="item item-inner">
</div>
<div class="item"></div>

.item {
  width: 100%;
  height: 100px;
  margin: 5px 0;
  background: salmon;
}

/*
Vzhledem k tomuto prvku bude umístěn jiný prvek
s absolutním pozicováním. Pozici tohoto prvku
měnit nechceme, proto není potřeba zadávat
vlastnosti, jako je top, atd.
*/
.item-outer {
  position: relative;
}

/*
Toto je element, který umisťujeme
vzhledem k item-outer
*/
.item-inner {
  width: 50px;
  height: 50px;
  background: lightblue;

  /* Nastavíme umístění v pravém horním rohu */
  position: absolute;
  top: 0;
  right: 0;
}