DARMOWE NARZĘDZIE

CSS Positioning Sandbox

Interaktywny generator kodu CSS do testowania position: static, relative, absolute, fixed i sticky. Ustaw wymiary i offsety, skopiuj gotowy kod. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

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

Pozycjonowanie

Tekst elementu

11 znaków

Kontener z position: relative Opcja narzędzia

Podgląd na żywo Opcja narzędzia

Pokaż siatkę Opcja narzędzia

Pokaż linie pomocnicze Opcja narzędzia

Szerokość kontenera (px)

Wysokość kontenera (px)

Wysokość przewijania (px)

Szerokość elementu (px)

Wysokość elementu (px)

Góra – top (px)

Prawa – right (px)

Dół – bottom (px)

Lewa – left (px)

Warstwy – z-index

Wynik

Ustaw typ pozycjonowania i wymiary, a następnie kliknij „Przetwórz", aby zobaczyć gotowy kod CSS.

Powiązane narzędzia

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

Sandbox pozycjonowania CSS

Interaktywny generator kodu CSS do nauki i testowania różnych typów pozycjonowania elementów: static, relative, absolute, fixed i sticky. Ustaw wymiary, offsety i z-index, a narzędzie wygenuje gotowy kod CSS gotowy do wklejenia w projekt.

position: absolute z-index top/right/bottom/left darmowe online

Do czego służy

Sandbox pozycjonowania CSS pomaga zrozumieć i przetestować wszystkie tryby właściwości position w CSS. Możesz wybrać typ pozycjonowania (statyczne, względne, absolutne, stałe lub przyklejone), ustawić wymiary kontenera i elementu, zdefiniować wartości offsetów top/right/bottom/left oraz z-index. Wynikiem jest gotowy blok kodu CSS z klasami .demo-container i .demo-box, który można od razu użyć lub skopiować do projektu.

Jak używać

Wpisz tekst elementu (np. „Position me"), wybierz typ pozycjonowania z listy, ustaw szerokość i wysokość kontenera oraz elementu, opcjonalnie podaj wartości top/right/bottom/left i z-index. Zaznacz opcję „Kontener z position: relative" jeśli chcesz kontener odniesienia. Kliknij „Przetwórz" — wynik pojawi się jako sformatowany kod CSS z przyciskiem Kopiuj.

Najczęstsze pytania

Jaka jest różnica między position: absolute a position: fixed?

Element z position: absolute jest pozycjonowany względem najbliższego przodka z pozycją inną niż static. Element z position: fixed jest zawsze pozycjonowany względem okna przeglądarki (viewport) i nie przewija się razem ze stroną.

Kiedy używać position: sticky?

position: sticky łączy cechy relative i fixed — element zachowuje się jak relative do momentu, gdy przy przewijaniu osiągnie ustalony offset (np. top: 0), po czym „przykleja się" i zachowuje jak fixed. Idealny do lepkich nagłówków tabeli lub nawigacji.

Co to jest z-index i kiedy działa?

z-index kontroluje kolejność warstw elementów na osi Z (głębokość). Działa tylko na elementach z pozycją inną niż static. Wyższy z-index = element bliżej użytkownika (renderowany na wierzchu).

Czy mogę od razu wkleić wygenerowany kod do projektu?

Tak. Wygenerowany kod CSS zawiera dwie klasy: .demo-container i .demo-box. Możesz je przemianować wedle potrzeb i wkleić bezpośrednio do swojego arkusza stylów CSS.