Ako môžeme urobiť, aby bol jeden prvok vyšší ako iný v rozložení?

Existuje niekoľko spôsobov, ako urobiť, aby bol jeden prvok vyšší ako iný v rozložení:

• z-index: Najbežnejší spôsob. Aplikuje sa na pozicované prvky (ktoré majú position odlišné od static). Prvok s vyššou hodnotou z-index bude nad prvkom s nižšou hodnotou v rovnakom kontexte vrstvenia.

  /* Prvok-1 bude pod Prvkom-2 */
  .element-1 {
    position: relative;
    z-index: 1;
  }
  
  .element-2 {
    position: relative;
    z-index: 2;
  }
  

• Poradie v DOM: Bez explicitného umiestnenia a z-index bude prvok, ktorý je v HTML kóde neskôr, vizuálne nad predchádzajúcimi.

  <!-- Prvok-2 bude nad Prvkom-1 -->
  <div class="element-1"></div>
  <div class="element-2"></div>
  

• Vlastnosti umiestnenia: Použitie vlastností ako position: absolute alebo position: fixed automaticky vytvára nový kontext vrstvenia a umiestňuje prvok nad normálny tok dokumentu (ak nie je špecifikované inak).

  .element-absolute {
    position: absolute;
    /* Iné vlastnosti umiestnenia */
  }
  

• Flexbox/Grid (Order): V layoutoch Flexbox a Grid vlastnosť order umožňuje meniť vizuálne poradie prvkov v kontejnery, hoci priamo neovplyvňuje kontext vrstvenia v štandardnom chápaní z-index.

  .container {
    display: flex;
  }
  
  /* Prvok-2 bude vizuálne prvý */
  .element-1 {
    order: 2;
  }
  
  .element-2 {
    order: 1;
  }
  

• Transformácie (Transform): Použitie vlastnosti transform vytvára nový lokálny kontext vrstvenia, a transformovaný prvok sa môže zobrazovať nad ostatnými, aj bez explicitného umiestnenia a z-index.

  .element-transformed {
    transform: translateZ(1px); /* alebo iná transformácia */
  }
  

Výber metódy závisí od kontextu a požadovaného efektu. Vo väčšine prípadov sa na kontrolu prekrytia používa z-index v kombinácii s position.