Position absolute bez względnego rodzica rozjeżdża cały układ

Pamiętaj o znakach diakrytycznych i innych glifach. Nie każdy krój zapasowy zawiera polskie ogonki w każdej odmianie, dlatego warto sprawdzić, czy wybrany stos radzi sobie z ą, ę, ł, ż oraz ze znakami typograficznymi. Jeśli twój główny krój ma ozdobne warianty, a zapasowy ich nie ma, tekst może wyglądać niespójnie po przełączeniu. Wtedy lepiej zawęzić zestaw stylów albo przygotować osobny plik z brakującymi glifami.

Jeszcze jedna pułapka dotyczy z-index. Element absolutny bez kontekstu pozycjonowania potrafi wjechać pod inny blok, nawet jeśli ma wysoki z-index. Kontekst nakładania tworzy każdy przodek z position innym niż static oraz z transformacją, filtrem albo opacity mniejszym niż 1. Zanim zaczniesz podbijać z-index, sprawdź, czy rodzic nie tworzy przypadkowego kontekstu, który ucina możliwości ustawiania kolejności warstw.

Przy testach nie wystarczy sprawdzić jednego modelu telefonu. Warto otworzyć stronę na ekranie o szerokości 320 pikseli i na tablecie, a także w widoku poziomym. Jeśli po dodaniu viewport układ nadal wygląda źle, przyczyną są zwykle stałe szerokości elementów, duże obrazy bez ograniczeń albo tabele bez przewijania. Wtedy pomaga maksymalna szerokość ustawiona na 100 procent dla mediów oraz elastyczne jednostki w stylach. Sama deklaracja viewport nie naprawi sztywnego projektu, ale bez niej żadne poprawki nie będą widoczne we właściwej skali.

Zaczynaj od selektora znacznika, gdy chcesz ustawić ogólne reguły dla całego dokumentu. Sięgaj po klasę, gdy element ma się powtarzać albo gdy chcesz łączyć kilka niezależnych cech. Zostaw identyfikator do wskazania jednego, niepowtarzalnego miejsca. Trzymanie się tego podziału sprawia, że arkusz stylów rośnie wolniej, a zmiany nie ciągną za sobą lawiny poprawek.

Rozwiązaniem jest box-sizing: border-box. Po jego ustawieniu podana szerokość obejmuje już zawartość, padding i obramowanie razem. Element z width: 300px, padding: 20px i border: 5px nadal zajmuje dokładnie 300 pikselów, a jego zawartość kurczy się do wnętrza. To odwraca logikę na korzyść projektowania: ustalasz rozmiar zewnętrzny i nie musisz już odejmować w głowie paddingu przy każdym obliczeniu.

Praktyczna zasada jest krótka: jeśli element ma być przypięty do konkretnego kontenera, ten kontener musi mieć position: relative. Jeśli ma być przypięty do okna przeglądarki, użyj fixed, a nie absolute. Sprawdzenie tego w inspektorze zajmuje sekundę i oszczędza godziny szukania, dlaczego coś przesunęło się o kilkanaście pikseli w bok.

Typowy błąd to ustawienie position: absolute bez żadnego relative w hierarchii. Wygląda to dobrze, dopóki ktoś nie doda marginesu na górze strony albo nie wstawi nowej sekcji wyżej. Wtedy element przesuwa się razem z dokumentem i potrafi zasłonić treść. Drugi częsty problem: rodzic ma position: static, więc nie tworzy kontekstu pozycjonowania, mimo że wygląda na kontener. Wystarczy jedna linijka relative, żeby naprawić całość.

Warto też pamiętać o kolejności: znacznik viewport powinien być jednym z pierwszych w head, przed arkuszami stylów i skryptami. Przeglądarki mobilne odczytują go przy pierwszym renderowaniu, a późniejsze zmiany przez JavaScript bywają ignorowane lub powodują przeskok widoku. Jeden poprawny wpis wystarcza na całą witrynę, o ile znajduje się w każdym generowanym dokumencie. To najtańsza poprawka, jaka zmienia komfort czytania na telefonie.

Najprostszy mechanizm wygląda tak: nadajesz rodzicowi position: relative, a dziecku position: absolute oraz wartości top, right, bottom lub left. Dziecko wypada wtedy z normalnego przepływu dokumentu i przesuwa się względem krawędzi rodzica. Ten zabieg stosuje się do podpisów na zdjęciach, znaczników w narożniku karty, rozwijanych menu czy nakładek na wykresy.

Jak to włączyć w praktyce Najsensowniej zrobić to globalnie, w jednym miejscu arkusza stylów, zanim zacznie się pisać jakiekolwiek reguły dla komponentów. Wystarczy selektor uniwersalny z pseudo-elementami ::before i ::after, ustawiony na box-sizing: border-box. Warto przy okazji ustawić margin: 0 i padding: 0 dla wszystkich elementów, żeby marginesy przeglądarki nie psuły wyrównania. Taki reset na starcie eliminuje najczęstsze źródło różnic między przeglądarkami.

Po zmianie globalnej trzeba sprawdzić dwa miejsca. Pierwsze to elementy, którym celowo ustawiano padding poza szerokością — teraz zawartość może się ścisnąć bardziej niż wcześniej. Drugie to elementy z width: 100% albo max-width w połączeniu z paddingiem: po przejściu na border-box przestaną wystawać poza rodzica. Jeśli jakiś pojedynczy element naprawdę ma działać po staremu, nadpisz mu box-sizing: content-box punktowo, ale nie rób tego bez konkretnego powodu.

Ustawienie position: absolute bez zrozumienia, czym jest najbliższy przodek z pozycjonowaniem, to jeden z najczęstszych powodów, dla których element ląduje w losowym miejscu strony. Przeglądarka szuka najpierw najbliższego rodzica, który ma ustawione position: relative, absolute, fixed lub sticky. Jeśli takiego nie znajdzie, element pozycjonuje się względem początkowego bloku zawierającego, czyli w praktyce całego dokumentu.