Piaskownica testowania CSS z-index

Testuj i debuguj właściwość CSS z-index w izolowanym sandboxie. Wklej HTML i CSS, ustaw rozmiar i sprawdź na żywo, jak działają konteksty nakładania warstw.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia testu z-index

HTML struktura 701 znaków

Style CSS 1706 znaków

Szerokość kontenera podglądu 980px

Wysokość kontenera podglądu 560px

Tryb diagnostyki

Pokaż granice elementów (outline debug)

Warstwy wykryte w arkuszu

Deklaracje z-index

liczba reguł z-index w polu „Style CSS”

Najwyższy z-index

999

wysoka wartość nie przeskoczy kontekstu rodzica

Podgląd (iframe)

980 × 560 px

suwaki szerokości i wysokości po lewej

Podgląd na Żywo (Stos z-index)

Szerokość: 980px Wysokość: 560px

Wygenerowane szablony kodu

HTML

<div class="demo">
  <header class="topbar">
    <div class="brand">Demo UI</div>
    <div class="menu">
      <button class="btn">Menu</button>
      <div class="dropdown">
        <div class="dropdown-item">Profile</div>
        <div class="dropdown-item">Billing</div>
        <div class="dropdown-item">Sign out</div>
      </div>
    </div>
  </header>

  <main class="content">
    <div class="card">
      <div class="card-title">Card A</div>
      <p>Try to make the dropdown appear above the topbar.</p>
      <p><strong>Hint:</strong> The content container creates a stacking context.</p>
    </div>

    <div class="toast">
      Toast notification (z-index: 30)
    </div>
  </main>
</div>

CSS

/* Intentional z-index puzzle:
   - The header is sticky with z-index: 20
   - The dropdown has z-index: 999
   - But the content wrapper creates a new stacking context using transform,
     so the dropdown cannot rise above the header.
*/

.demo{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f6f7fb;
  padding:20px;
  min-height:480px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:14px;
  background:white;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.brand{ font-weight: 800; }

.menu{ position: relative; }
.btn{
  border:1px solid rgba(0,0,0,.14);
  background:white;
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
}

.dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  width: 220px;
  border-radius:14px;
  background:white;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  overflow:hidden;

  /* Looks high... */
  z-index: 999;
}

.dropdown-item{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.dropdown-item:last-child{ border-bottom:0; }

.content{
  margin-top: 18px;

  /* This transform creates a stacking context.
     Try removing it, or move the dropdown outside. */
  transform: translateZ(0);
}

.card{
  background:white;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  max-width: 520px;
}

.card-title{ font-weight: 800; margin-bottom: 6px; }

.toast{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  background: rgba(13,110,253,.92);
  color: white;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
}

Ściąga: co tworzy kontekst stosowania (stacking context) i typowe pułapki

Z-index porównuje się tylko W OBRĘBIE jednego kontekstu — element o wartości 999 zamknięty w kontekście rodzica przegra z sąsiadem rodzica o wartości 1
Własność	Przykład (domyślne demo narzędzia)	Efekt
position ≠ static + z-index	.topbar { position: sticky; z-index: 20 } (demo)	Element pozycjonowany z z-index innym niż auto dostaje własny kontekst — jego dzieci nie przeskoczą ponad sąsiadów rodzica
transform	.content { transform: translateZ(0) } (demo)	Kontekst powstaje nawet bez z-index — dropdown z z-index: 999 zostaje zamknięty wewnątrz .content
opacity < 1	opacity: .99	Każda wartość mniejsza od 1 tworzy kontekst, również prawie nieprzezroczysta
filter / backdrop-filter	filter: blur(2px)	Wartość inna niż none izoluje element razem z całą jego zawartością
isolation: isolate	isolation: isolate	Celowe odizolowanie warstw bez żadnego efektu wizualnego — najbezpieczniejszy sposób ograniczenia z-index
will-change	will-change: transform	Deklaracja planowanej animacji tworzy kontekst zapobiegawczo, zanim animacja wystartuje
mix-blend-mode ≠ normal	mix-blend-mode: multiply	Tryby mieszania zbaczają element z domyślnego stosu rysowania

Najważniejsza pułapka: z-index nie działa na elementach z position: static (działa na pozycjonowanych oraz dzieciach flex/grid). A gdy dwa elementy z z-index „nie chcą” się przeskoczyć, przyczyną prawie nigdy nie jest wartość — tylko nowy kontekst stosowania u jednego z rodziców. Domyślne demo pokazuje to na żywo: dropdown ma z-index: 999, ale transform: translateZ(0) na wrapperze treści zamyka go w kontekście poniżej przyklejonego nagłówka (z-index: 20). Usuń transform w edytorze, aby zobaczyć różnicę.

Warto wiedzieć — z-index a debugowanie

Jak znaleźć winowajcę kontekstu

Przeszukaj arkusz pod kątem transform, opacity, filter, isolation i will-change — każda z nich może tworzyć kontekst. W DevTools (Chrome/Edge: widok warstw 3D, Firefox: 3D view) od razu widać, który element utknął w osobnym stosie. W tym narzędziu włącz tryb „Pokaż granice elementów (outline debug)”, aby zobaczyć krawędzie i z-index każdego bloku demo.

Większa liczba nie zawsze wygrywa

Porównywanie z-index zaczyna się od rodziców: dziecko o wartości 999 w kontekście rodzica o wartości 1 przegra z sąsiadem rodzica o wartości 2. Podbijanie wartości do 9999 nie pomaga — trzeba albo usunąć tworzący kontekst własność (np. transform), albo podnieść z-index właściwego przodka.

Kolejność bez z-index i rozsądna skala

Bez z-index stos rysowania układa się po kolejności w DOM: pozycjonowane elementy nad niepozycjonowanymi, a późniejsze nad wcześniejszymi. Gdy warstwy są już potrzebne, trzymaj skoków 10 (10, 20, 30 — nakładki, dropdown, toast), zamiast losowych 99999: łatwiej wstawić nową warstwę pomiędzy i nie tworzyć wyścigu zbrojeń.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Piaskownica CSS z-index — Zrozum warstwowość i kontekst układania elementów HTML

Interaktywna piaskownica CSS z-index to wizualne narzędzie online stworzone do łatwego zrozumienia zasad nakładania się elementów i działania kontekstu układania (stacking context).

Jak działa właściwość z-index w CSS i dlaczego bywa tak myląca?

Właściwość z-index w CSS decyduje o kolejności wyświetlania elementów wzdłuż osi Z, czyli określa, które obiekty na stronie internetowej znajdują się bliżej użytkownika (na wierzchu), a które pod spodem. Choć koncepcja ta wydaje się prosta, w praktyce przysparza wielu problemów programistom i projektantom stron. Często zdarza się, że przypisanie ogromnej wartości, np. z-index: 9999, nie powoduje przeniesienia elementu na samą górę.

Dzieje się tak, ponieważ z-index nie działa w próżni. Właściwość ta ma zastosowanie wyłącznie do elementów pozycjonowanych (czyli takich, które mają właściwość position ustawioną na relative, absolute, fixed lub sticky). Domyślne elementy o pozycji static całkowicie ignorują z-index. Drugim, znacznie poważniejszym powodem zamieszania jest koncepcja kontekstu układania.

Zrozumieć kontekst układania (Stacking Context) — klucz do opanowania z-index

Kontekst układania to trójwymiarowa struktura wewnątrz dokumentu HTML, w obrębie której elementy są układane wzdłuż osi Z. Kiedy element tworzy nowy kontekst układania, wszystkie jego elementy potomne są pozycjonowane względem niego, a nie względem całej strony. Oznacza to, że potomek z bardzo wysokim z-indexem nie wyjdzie ponad element nadrzędny o niższym priorytecie w nadrzędnym kontekście.

Można to porównać do folderów z dokumentami – niezależnie od tego, jak wysoko umieścisz kartkę wewnątrz jednego folderu, cały folder i tak może znajdować się pod innym folderem. Zrozumienie tej hierarchii jest kluczowe dla uniknięcia frustracji podczas stylowania menu nawigacyjnych, okien modalnych czy wyskakujących powiadomień tooltips.

Jak korzystać z piaskownicy CSS z-index do testowania warstw w czasie rzeczywistym?

Nasza piaskownica CSS z-index została zaprojektowana po to, aby ułatwić wizualizację tych skomplikowanych zależności. W panelu bocznym możesz dodawać wirtualne elementy HTML, zmieniać ich pozycjonowanie oraz manipulować wartościami z-index za pomocą prostych kontrolek. Główny ekran prezentuje trójwymiarowy model warstw, który można obracać pod różnymi kątami.

Dzięki temu zobaczysz dokładnie, jak zmiana właściwości jednego elementu wpływa na jego pozycję w strukturze warstwowej. Narzędzie pozwala na symulowanie tworzenia nowych kontekstów układania, co pomaga błyskawicznie zrozumieć, dlaczego dany element jest ukryty za innym, mimo teoretycznie wyższego z-indexu.

Właściwości CSS, które wpływają na z-index lub tworzą nowy kontekst układania

Wielu programistów nie zdaje sobie sprawy, że nowy kontekst układania może zostać utworzony przez właściwości CSS inne niż samo pozycjonowanie i z-index. Jednym z najczęstszych sprawców nieoczekiwanego zachowania warstw jest użycie właściwości opacity o wartości mniejszej niż 1. Zmiana przezroczystości elementu automatycznie izoluje jego dzieci w nowym kontekście.

Podobny efekt wywołuje zastosowanie filtrów (filter), efektów przekształceń geometrycznych (transform), właściwości perspective, a także nowoczesnych właściwości takich jak clip-path czy mask. Również kontenery z włączonym układem Flexbox lub CSS Grid, w połączeniu z określonymi parametrami potomków, generują nowe środowisko układania. Nasza piaskownica pozwala na eksperymentowanie ze wszystkimi tymi właściwościami.

Najczęstsze problemy z z-index i sprawdzone metody ich rozwiązywania

Klasycznym problemem jest sytuacja, w której wyskakujące menu typu dropdown chowa się pod sliderem ze zdjęciami lub pod banerem reklamowym. Najczęstszym rozwiązaniem jest zlokalizowanie wspólnego przodka obu tych elementów i upewnienie się, że kontener z menu dropdown ma wyższy z-index oraz prawidłowo zdefiniowany kontekst pozycjonowania niż kontener baneru.

Innym problemem jest tzw. "wojna na z-index", czyli bezmyślne dodawanie coraz wyższych wartości (np. 99999, 999999) w celu naprawienia layoutu. Prowadzi to do całkowitej utraty kontroli nad kodem. Dobrą praktyką jest stosowanie niskich, uporządkowanych wartości (np. 10, 20, 30) oraz dokumentowanie struktury warstwowej projektu w komentarzach kodu.

Najczęściej zadawane pytania

Dlaczego właściwość z-index nie działa na moim elemencie HTML?

Najczęstszą przyczyną jest brak ustawienia właściwości position. Z-index działa tylko dla elementów pozycjonowanych (relative, absolute, fixed, sticky). Dla elementów z domyślnym position: static jest on ignorowany.

Co to jest kontekst układania (Stacking Context) w CSS?

To niezależny obszar renderowania elementów na osi Z. Elementy potomne wewnątrz jednego kontekstu nie mogą wyjść ponad elementy z innego, wyższego kontekstu, niezależnie od tego, jak wysoki z-index im przypiszemy.

Czy wysokie wartości z-index zawsze oznaczają, że element będzie na wierzchu?

Nie, wysoka wartość z-index działa tylko w obrębie tego samego kontekstu układania. Jeśli element nadrzędny ma niski priorytet w swoim kontekście, jego dzieci również znajdą się pod elementami z innych, wyższych kontekstów.

Jakie właściwości CSS (oprócz z-index) tworzą nowy kontekst układania?

Nowy kontekst układania tworzą m.in. właściwości: opacity (mniejsze niż 1), transform (np. translate), filter, perspective, clip-path, mask oraz niektóre konfiguracje flexboxa i css grid.

Jak piaskownica z-index pomaga w debugowaniu kodu CSS?

Narzędzie pozwala na wizualną prezentację warstw w przestrzeni trójwymiarowej. Możesz w nim odtworzyć strukturę HTML swojej strony i sprawdzić, które właściwości CSS powodują powstawanie nowych kontekstów układania.