Kā mēs varam padarīt vienu elementu augstāku par otru izkārtojumā?

Ir vairākas veidi, kā padarīt vienu elementu augstāku par citu izkārtojumā:

• z-index: Visbiežāk izmantotais veids. Tiek piemērots pozicionētiem elementiem (ar position, izņemot static). Augstāka z-index vērtība būs virs zemākas tajā pašā slāņa kontekstā esoša elementa.

  /* Elements-1 būs zem Elements-2 */
  .element-1 {
    position: relative;
    z-index: 1;
  }
  
  .element-2 {
    position: relative;
    z-index: 2;
  }
  

• DOM secība: Ja nav skaidras pozicionēšanas un z-index, vēlāk HTML kodā novietotais elements vizuāli būs virs iepriekšējiem.

  <!-- Elements-2 būs virs Elements-1 -->
  <div class="element-1"></div>
  <div class="element-2"></div>
  

• Pozicionēšanas īpašības: Izmantojot position: absolute vai position: fixed, automātiski tiek izveidots jauns slāņa konteksts, un tas tiek novietots virs parastā dokumenta plūsmas (ja nav norādīts citādi).

  .element-absolute {
    position: absolute;
    /* Citi pozicionēšanas īpašības */
  }
  

• Flexbox/Grid (Order): Flexbox un Grid izkārtojuma režīmā order īpašība ļauj mainīt elementu vizuālo secību, lai gan tieši neietekmē z-index kontekstu.

  .container {
    display: flex;
  }
  
  /* Elements-2 vizuāli būs pirmais */
  .element-1 {
    order: 2;
  }
  
  .element-2 {
    order: 1;
  }
  

• Transformācijas (Transform): transform īpašība rada jaunu vietējo kontekstu, un transformētais elements var tikt rādīts virs citiem, pat ja nav skaidras pozicionēšanas un z-index.

  .element-transformed {
    transform: translateZ(1px); /* vai cita transformācija */
  }
  

Izvēle ir atkarīga no konteksta un vēlamā efekta. Visbiežāk z-index tiek izmantots kopā ar position, lai kontrolētu slāņošanu.