Cum putem face ca un element să fie mai înalt decât…

Există mai multe moduri de a face ca un element să fie deasupra altuia în layout:

z-index: Cel mai comun mod. Se aplică elementelor poziționate (care au position diferit de static). Un element cu o valoare mai mare de z-index va fi deasupra unui element cu o valoare mai mică în același context de suprapunere.
```
/* Element-1 va fi sub Element-2 */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
Ordinea în DOM: Fără poziționare explicită și z-index, elementul plasat mai târziu în codul HTML va fi vizual mai sus față de cele anterioare.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Proprietățile de poziționare: Utilizarea proprietăților precum position: absolute sau position: fixed creează automat un nou context de suprapunere pentru element și îl plasează deasupra fluxului normal al documentului (dacă nu se specifică altfel).
```
.element-absolute {
  position: absolute;
  /* Alte proprietăți de poziționare */
}
```
Flexbox/Grid (Order): În layout-urile Flexbox și Grid, proprietatea order permite schimbarea ordinii vizuale a elementelor din container, deși nu afectează direct contextul de suprapunere în înțelesul standard al z-index.
```
.container {
  display: flex;
}

/* Element-2 va fi vizual primul */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transformări (Transform): Utilizarea proprietății transform creează un nou context de suprapunere local, iar elementul transformat poate apărea deasupra altora, chiar și fără poziționare explicită și z-index.
```
.element-transformed {
  transform: translateZ(1px); /* sau orice altă transformare */
}
```

Alegerea metodei depinde de context și de efectul dorit. În cele mai multe cazuri, pentru controlul suprapunerii, se folosește z-index în combinație cu position.

Cum putem face ca un element să fie mai înalt decât altul în layout?