Jak můžeme udělat, aby byl jeden prvek vyšší než jiný…

Existuje několik způsobů, jak udělat, aby byl jeden prvek nad jiným v rozložení:

z-index: Nejčastější způsob. Používá se na pozicované prvky (které mají position odlišné od static). Prvek s vyšší hodnotou z-index bude nad prvkem s nižší hodnotou ve stejném kontextu vrstvení.
```
/* Prvek-1 bude pod Prvkem-2 */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
Pořadí v DOM: Bez explicitního umístění a z-index bude prvek, který je v HTML kódu později, vizuálně nad předchozími.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Vlastnosti umístění: Použití vlastností jako position: absolute nebo position: fixed automaticky vytvoří nový kontext vrstvení a umístí prvek nad normální tok dokumentu (pokud není specifikováno jinak).
```
.element-absolute {
  position: absolute;
  /* Další vlastnosti umístění */
}
```
Flexbox/Grid (Order): V layoutech Flexbox a Grid vlastnost order umožňuje měnit vizuální pořadí prvků uvnitř kontejneru, i když přímo neovlivňuje kontext vrstvení ve standardním chápání z-index.
```
.container {
  display: flex;
}

/* Prvek-2 bude vizuálně první */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transformace (Transform): Použití vlastnosti transform vytváří nový lokální kontext vrstvení, a transformovaný prvek se může zobrazit nad ostatními, i bez explicitního umístění a z-index.
```
.element-transformed {
  transform: translateZ(1px); /* nebo jiná transformace */
}
```

Volba metody závisí na kontextu a požadovaném efektu. Většinou se pro kontrolu překrývání používá z-index ve spojení s position.

Jak můžeme udělat, aby byl jeden prvek vyšší než jiný v rozvržení?