Hogyan tehetjük egy elemet magasabbá, mint egy…

Számos módszer létezik arra, hogy egy elemet egy másik fölé helyezzünk a layoutban:

z-index: A leggyakoribb módszer. Pozícionált elemekre alkalmazható (amelyek position értéke nem static). Egy magasabb z-index értékű elem a kisebb értékű fölött lesz ugyanabban a stacking contextben.
```
/* Az elem-1 az elem-2 alatt lesz */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
DOM sorrend: Nyilvánvaló pozícionálás és z-index nélkül a HTML-kódban később elhelyezett elem vizuálisan az előzők fölött lesz.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Pozícionálási tulajdonságok: Az olyan tulajdonságok, mint a position: absolute vagy position: fixed, automatikusan új stacking contextet hoznak létre, és az elemet a dokumentum normál áramlása fölé helyezik (ha nem jelezzük másként).
```
.element-absolute {
  position: absolute;
  /* Egyéb pozícionálási tulajdonságok */
}
```
Flexbox/Grid (Order): Flexbox és Grid layoutokban a order tulajdonság lehetővé teszi az elemek vizuális sorrendjének módosítását a konténeren belül, bár nem befolyásolja közvetlenül a stacking contextet a z-index standard értelmezésében.
```
.container {
  display: flex;
}

/* Az elem-2 vizuálisan az első lesz */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transzformációk (Transform): A transform tulajdonság használata létrehoz egy helyi stacking contextet, és a transzformált elem a többi fölé kerülhet, még akkor is, ha nincs explicit pozícionálás vagy z-index.
```
.element-transformed {
  transform: translateZ(1px); /* vagy más transzformáció */
}
```

A módszer kiválasztása a kontextustól és a kívánt hatástól függ. A legtöbb esetben a z-index és a position kombinációját használják az átfedések kezelésére.

Hogyan tehetjük egy elemet magasabbá, mint egy másikat a elrendezésben?