CSS Z-index Tester Sandbox
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. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Sandbox testowania CSS z-index
Interaktywne narzędzie do testowania i debugowania właściwości CSS z-index w przeglądarce. Wklej własny HTML i CSS, ustaw rozmiar obszaru roboczego i sprawdź na żywo, jak stosy warstw zachowują się w różnych kontekstach.
Do czego służy
Narzędzie rozwiązuje jeden z najczęstszych problemów CSS — niezrozumiałe zachowanie z-index. Pozwala szybko sprawdzić, czy element przesłania inny, dlaczego dropdown nie pojawia się nad nagłówkiem, albo dlaczego modal ląduje pod overlay. Wystarczy wkleić kod i nacisnąć „Przetwórz" — sandbox wyrenderuje dokument w izolowanym iframe.
Jak używać
1. Wklej kod HTML w lewe pole i CSS w drugie. 2. Ustaw szerokość i wysokość obszaru podglądu (np. 980×560 px). 3. Opcjonalnie włącz „Outline" — każdy element dostanie kolorową ramkę ułatwiającą diagnostykę. 4. Kliknij „Przetwórz". Podgląd pojawia się od razu, a poniżej znajdziesz przyciski do skopiowania kodu HTML i CSS.
Najczęstsze pytania
Dlaczego z-index: 999 nie działa ponad nagłówkiem?
Najczęstsza przyczyna to nowy kontekst nakładania (stacking context) tworzony przez właściwości takie jak transform, filter, opacity < 1 czy isolation: isolate na rodzicu elementu. Element z wysokim z-index rywalizuje tylko wewnątrz swojego kontekstu, a nie globalnie. Sandbox pozwala to szybko zweryfikować — usuń transform: translateZ(0) i porównaj wynik.
Czym jest „Outline" w opcjach?
Tryb Outline nakłada na każdy element w dokumencie cienką, niebieską przerywaną ramkę (outline: 1px dashed). Dzięki temu widać granice wszystkich bloków bez zmiany ich layout — przydatne przy diagnozowaniu overflow czy nakładania elementów.
Czy mogę tu testować CSS position: fixed i sticky?
Tak. Sandbox osadza kod w izolowanym iframe, więc position: fixed odnosi się do ramki, a position: sticky działa w kontekście przewijania wewnątrz sandboxa. Ustaw odpowiednią wysokość (np. 560 px) i dodaj treść, żeby obszar był przewijalny.