Jak sprawić, aby jeden element był wyższy od drugiego…

Istnieje kilka sposobów, aby element był wyżej od innego w układzie:

z-index: Najczęstszy sposób. Dotyczy elementów pozycjonowanych (posiadających position inną niż static). Element z większą wartością z-index będzie wyżej od elementu z mniejszą wartością w tym samym kontekście nakładania (stacking context).
```
/* Element-1 będzie niżej od Element-2 */
.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}
```
Kolejność w DOM: W przypadku braku jawnego pozycjonowania i z-index, element umieszczony później w kodzie HTML będzie wizualnie wyżej od poprzednich.
```

<div class="element-1"></div>
<div class="element-2"></div>
```
Właściwości pozycjonowania: Użycie właściwości takich jak position: absolute lub position: fixed automatycznie tworzy nowy kontekst nakładania i umieszcza element ponad normalnym przepływem dokumentu (jeśli nie określono inaczej).
```
.element-absolute {
  position: absolute;
  /* Inne właściwości pozycjonowania */
}
```
Flexbox/Grid (Order): W layoutach Flexbox i Grid, właściwość order pozwala zmienić kolejność wizualną elementów w kontenerze, choć nie wpływa bezpośrednio na kontekst nakładania w standardowym rozumieniu z-index.
```
.container {
  display: flex;
}

/* Element-2 będzie wizualnie pierwszy */
.element-1 {
  order: 2;
}

.element-2 {
  order: 1;
}
```
Transformacje (Transform): Użycie właściwości transform tworzy nowy lokalny kontekst nakładania, a przekształcony element może wyświetlać się ponad innymi, nawet bez jawnego pozycjonowania i z-index.
```
.element-transformed {
  transform: translateZ(1px); /* lub inna transformacja */
}
```

Wybór metody zależy od kontekstu i pożądanego efektu. W większości przypadków do kontroli nakładania używa się z-index w połączeniu z position.

Jak sprawić, aby jeden element był wyższy od drugiego w układzie?