Pozicování elementů (position)

Vlastnost position v CSS vám umožňuje přesně řídit, kde se element zobrazí na webové stránce. Je to klíčová vlastnost pro složitější rozložení.

Existuje pět hlavních hodnot vlastnosti position:

• static (Výchozí)

  Toto je výchozí hodnota pro všechny HTML elementy. Elementy s position: static; jsou umístěny v normálním toku dokumentu. Nemůžete je posouvat pomocí vlastností top, bottom, left, right nebo z-index.

  div {
      position: static; /* Toto je výchozí a obvykle se nemusí specifikovat */
  }

• relative

  Element s position: relative; je umístěn relativně k jeho normální pozici v toku dokumentu. Můžete jej pak posouvat pomocí vlastností top, bottom, left a right. Důležité je, že i když se element posune, jeho původní místo v toku dokumentu zůstane prázdné a další elementy se budou chovat, jako by tam element stále byl.

  .box-relative {
      position: relative;
      top: 20px;   /* Posune box o 20px dolů od jeho normální pozice */
      left: 30px;  /* Posune box o 30px doprava od jeho normální pozice */
      background-color: lightgray;
      width: 100px;
      height: 100px;
  }

• absolute

  Element s position: absolute; je vyjmut z normálního toku dokumentu. Jeho pozice je určena relativně k jeho nejbližšímu předkovi, který má nastavenou pozici jinou než static (tj. relative, absolute, fixed nebo sticky). Pokud takový rodič neexistuje, element se pozicuje relativně k elementu (viewportu).

  Vlastnosti top, bottom, left a right pak definují vzdálenost od okrajů tohoto rodičovského elementu (nebo viewportu).

  .rodic {
      position: relative; /* Důležité: Rodič musí mít pozici jinou než static */
      width: 300px;
      height: 200px;
      border: 2px solid red;
  }
  .dite-absolute {
      position: absolute;
      top: 10px;
      right: 10px; /* Umístí se 10px odshora a 10px odprava rodiče */
      background-color: yellow;
      width: 50px;
      height: 50px;
  }

  Protože absolute element je vyjmut z toku, ostatní elementy se chovají, jako by tam nebyl.

• fixed

  Element s position: fixed; je také vyjmut z normálního toku dokumentu. Jeho pozice je určena relativně k viewportu prohlížeče. To znamená, že element zůstane na stejném místě na obrazovce, i když uživatel stránku posouvá. Typické použití je pro navigační lišty, které zůstávají viditelné nahoře, nebo pro tlačítka "zpět nahoru".

  .pevna-lista {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #2c3e50;
      color: white;
      padding: 10px 0;
      text-align: center;
      z-index: 1000; /* Zajistí, že bude nad ostatními elementy */
  }

• sticky

  Element s position: sticky; se chová jako relative, dokud uživatel neprojede určitý bod posouvání, kdy se pak stane fixed elementem. Je to užitečné pro navigační panely, které se "přilepí" k horní části obrazovky, jakmile se k nim doscrolluje.

  .sticky-header {
      position: sticky;
      top: 0; /* Přilepí se k hornímu okraji, když na něj doscrollujeme */
      background-color: #f39c12;
      padding: 10px;
      z-index: 500;
  }

Z-index

Vlastnost z-index určuje pořadí elementů v 3D prostoru (hloubku). Element s vyšším z-index se zobrazí nad elementem s nižším z-index. Platí pouze pro elementy, které mají nastavenou pozici jinou než static.

.prekryvajici-box {
    position: absolute;
    z-index: 2;
    background-color: green;
}
.spodni-box {
    position: absolute;
    z-index: 1;
    background-color: red;
}