Warstwy i nakładanie: z-index, overlay i kontekst stosu

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić, do czego służy z-index,
• odróżnić zwykłe nakładanie elementów od kontekstu stosu,
• rozpoznać sytuacje, w których z-index pozornie „nie działa”,
• zbudować prosty overlay i modal na warstwie nad treścią,
• stosować przewidywalną skalę wartości warstw zamiast przypadkowych liczb.

Kontekst praktyczny

Warstwy pojawiają się w prawie każdym realnym interfejsie: sticky header, dropdown menu, tooltip, badge, modal, drawer, komunikat cookie, overlay ładowania albo podpowiedź nad formularzem.

Warstwy w interfejsie

Przeglądarka rysuje elementy w określonej kolejności. Gdy elementy się nakładają, jeden trafia wyżej, a drugi niżej. Domyślnie decydują między innymi kolejność w HTML, pozycjonowanie i konteksty tworzone przez wybrane właściwości CSS.

z-index pozwala świadomie ustawić kolejność wybranych elementów na osi głębi. Nie zastępuje jednak dobrego layoutu: służy do kontroli nakładania, nie do układania całej strony.

z-index

z-index ustawia kolejność elementów na osi Z, czyli „bliżej” albo „dalej” od użytkownika. Wyższa wartość zwykle oznacza, że element będzie narysowany nad elementem z niższą wartością w tym samym kontekście stosu.

.card {
  position: relative;
  z-index: 1;
}

.dropdown {
  position: absolute;
  z-index: 10;
}

W codziennej pracy najczęściej łączysz z-index z pozycjonowaniem: relative, absolute, fixed albo sticky.

Kontekst stosu

Kontekst stosu to lokalny „świat warstw”. Elementy wewnątrz jednego kontekstu porównują się między sobą, ale nie zawsze mogą przeskoczyć elementy z innego kontekstu.

Kontekst stosu może powstać między innymi przez position z z-index, opacity mniejsze niż 1, transform, filter albo isolation: isolate.

Kiedy z-index nie działa

Jeśli zmieniasz z-index, a element nadal nie pojawia się nad innym, sprawdź kolejno:

• czy element ma pozycjonowanie albo jest elementem flex/grid, który może przyjąć z-index,
• czy porównujesz elementy w tym samym kontekście stosu,
• czy rodzic nie ma overflow: hidden, który przycina dziecko,
• czy inny element nie tworzy nowego kontekstu przez transform, opacity albo filter,
• czy nie próbujesz naprawić strukturalnego problemu layoutu samą liczbą.

Overlay

Overlay to warstwa zasłaniająca treść pod spodem. Najczęściej jest półprzezroczystym tłem dla modala, menu mobilnego albo procesu ładowania.

Kopiuj:root {
  --layer-base: 0;
  --layer-dropdown: 10;
  --layer-sticky: 20;
  --layer-overlay: 40;
  --layer-modal: 50;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
}

Taka skala jest łatwiejsza do utrzymania niż przypadkowe wartości typu 999999. Widzisz od razu, że modal ma być wyżej niż overlay, a dropdown niżej niż modal.

Modal

Modal to panel, który pojawia się nad treścią i zwykle wymaga decyzji użytkownika. W CSS najczęściej składa się z dwóch warstw: tła typu overlay oraz samego okna dialogowego.

W realnej aplikacji modal potrzebuje też obsługi dostępności: fokusu klawiatury, zamykania klawiszem Escape i odpowiednich atrybutów ARIA. W tej lekcji skupiamy się na warstwach wizualnych.

Dropdown

Dropdown to mniejsza warstwa niż modal. Zwykle pojawia się pod przyciskiem lub polem formularza, dlatego często używa position: absolute względem rodzica z position: relative.

.menu {
  position: relative;
}

.menu__dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: var(--layer-dropdown);
}

Dropdown powinien być wyżej niż zwykła treść, ale nie musi wygrywać z modalem. Dlatego dobrze trzymać go na osobnym poziomie w skali warstw.

Bezpieczna skala warstw

Zamiast zwiększać liczby przy każdym konflikcie, ustal małą skalę semantyczną. Przykładowo:

• 0 — zwykła treść,
• 10 — dropdowny i tooltipy,
• 20 — sticky header lub pasek postępu,
• 40 — overlay,
• 50 — modal albo dialog.

Praktyczny przykład overlaya

Poniższy przykład pokazuje podstawowy układ: aplikacja w tle, półprzezroczysty overlay oraz modal nad nim.

Kopiuj<div class="modal-layer">
  <div class="modal-layer__backdrop"></div>
  <section class="modal-layer__dialog">
    <h2>Potwierdź akcję</h2>
    <p>Dialog jest nad overlayem, a overlay nad treścią strony.</p>
  </section>
</div>

.modal-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: var(--layer-overlay);
}

.modal-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(15 23 42 / .64);
}

.modal-layer__dialog {
  position: relative;
  z-index: 1;
}

Interpretacja: treść strony zostaje widoczna, ale jest przygaszona. Overlay blokuje wizualnie tło, a modal jest czytelną warstwą decyzyjną.

Najczęstsze błędy początkujących

• Ustawianie coraz większych wartości z-index bez sprawdzenia kontekstu stosu.
• Oczekiwanie, że dziecko z z-index: 9999 wyjdzie ponad rodzica zamkniętego w niższej warstwie.
• Brak ustalonej skali warstw w projekcie.
• Tworzenie overlaya bez przemyślenia, czy nie zasłoni nawigacji, focusa albo komunikatów systemowych.
• Używanie overflow: hidden na rodzicu dropdownu, który ma wychodzić poza kartę.

Mini zadanie

Stwórz prosty overlay z kartą modalną i warstwą tła.

• Zdefiniuj zmienne CSS dla warstw: dropdown, sticky, overlay i modal.
• Utwórz kontener modala z position: fixed i inset: 0.
• Dodaj półprzezroczysty backdrop jako warstwę pod dialogiem.
• Ustaw dialog nad backdropem przez position: relative i z-index.
• Sprawdź, czy modal nie znika pod headerem ani pod inną warstwą.

Checklista

• Wiem, że z-index kontroluje kolejność nakładania elementów.
• Rozumiem, że elementy porównują się wewnątrz kontekstu stosu.
• Potrafię wskazać właściwości, które mogą utworzyć nowy kontekst stosu.
• Umiem zbudować overlay i modal z przewidywalną kolejnością warstw.
• Nie używam losowych wartości typu 999999 jako pierwszej odpowiedzi na konflikt warstw.
• Potrafię zaproponować prostą skalę warstw dla projektu.

Podsumowanie lekcji

z-index jest narzędziem do kontroli kolejności nakładania, ale działa przewidywalnie dopiero wtedy, gdy rozumiesz kontekst stosu. Overlay, modal i dropdown są dobrymi przykładami komponentów, które potrzebują jasnej hierarchii warstw.

Moduł layoutu jest domknięty: znasz Flexbox, Grid, pozycjonowanie oraz warstwy. Kolejny etap roadmapy to responsywność i podejście mobile-first.