Kuidas saame teha ühe elemendi teise kõrgemaks paigutuses?

On mitmeid viise, kuidas teha üks element teise kõrgemaks paigutuses:

• z-index: Kõige levinum viis. Rakendub positsioneeritud elementidele (omavad position, välja arvatud static). Kõrgem z-index väärtus on kõrgem samas kihis (stacking context).

  /* Element-1 on madalam kui Element-2 */
  .element-1 {
    position: relative;
    z-index: 1;
  }
  
  .element-2 {
    position: relative;
    z-index: 2;
  }
  

• DOM-i järjekord: Kui puudub selge positsioneerimine ja z-index, siis HTML-koodis hiljem paiknev element on visuaalselt kõrgem eelnevatest.

  <!-- Element-2 on kõrgem kui Element-1 -->
  <div class="element-1"></div>
  <div class="element-2"></div>
  

• Positsioneerimise omadused: Kasutades position: absolute või position: fixed, luuakse automaatselt uus kihiline kontekst ning see tõstetakse üle tavalise dokumendi voolu (kui ei ole määratud teisiti).

  .element-absolute {
    position: absolute;
    /* Teised positsioneerimise omadused */
  }
  

• Flexbox/Grid (Order): Flexbox ja Grid Layouts kasutades order omadust, saab muuta elementide visuaalset järjekorda, kuigi see ei mõjuta otseselt z-index konteksti.

  .container {
    display: flex;
  }
  
  /* Element-2 on visuaalselt esimene */
  .element-1 {
    order: 2;
  }
  
  .element-2 {
    order: 1;
  }
  

• Transformatsioonid (Transform): Kasutades transform omadust, luuakse uus kohalik kontekst ning transformeeritud element võib olla nähtav kõrgemal teistest, isegi ilma selge positsioneerimise ja z-index-ita.

  .element-transformed {
    transform: translateZ(1px); /* või muu transformatsioon */
  }
  

Valik sõltub kontekstist ja soovitud efektist. Enamasti kasutatakse z-index koos position-iga kihistamise kontrollimiseks.