Gdy position absolute ucieka z układu, znajdź przodka z position
Podstawowy szkielet wygląda tak: w table umieszczasz tr, a w nim td lub th. Komórka nagłówkowa th jest domyślnie pogrubiona i wyśrodkowana, ale najważniejsze jest to, że niesie informację o tym, czego dotyczą dane w kolumnie lub wierszu. Dla tabelarycznych danych zawsze używaj th na początku wiersza lub kolumny — to nie kwestia wyglądu, lecz dostępności i poprawnego odczytu przez czytniki ekranu.<br>
<br>
<br>
<br>
Drugi częsty problem to z-index. Element absolutny tworzy nowy kontekst układania tylko wtedy, gdy ma z-index inny niż auto albo position: fixed lub sticky. Dwa elementy absolutne z różnych kontenerów mogą się nakładać w nieprzewidywalny sposób, jeśli ich przodkowie mają własne konteksty układania. Najprościej trzymać absolutne elementy w jednym, przewidywalnym drzewie i nie mnożyć kontekstów bez potrzeby.<br>
<br>
<br>
<br>
Typowe pomyłki to ustawianie wysokości na sztywno i jednoczesne oczekiwanie, że elementy rozłożą się równo w pionie, a także mieszanie flex-wrap z flex-direction: column, gdzie zawijanie działa w poprzek, czyli w poziomie. Osobny problem to overflow: hidden na kontenerze — jeśli elementy mają minimalną szerokość większą niż dostępna przestrzeń, zostaną przycięte, a nie przeniesione. Warto też pamiętać, że zawijanie nie działa na elementach o position: absolute, bo wypadają one z normalnego przepływu.<br>
<br>
<br>
<br>
Domyślne zachowanie kontenera flex to układ jednoliniowy. Wszystkie elementy dziecięce ustawiają się w jednym rzędzie, a gdy brakuje miejsca, kurczą się do granic możliwości. Wystarczy jednak dodać właściwość flex-wrap: wrap, żeby zamiast ściskać elementy, przenosić je do kolejnych linii. To jedno słowo zmienia sposób działania całego układu i najczęściej rozwiązuje problem, który próbuje się naprawiać na siłę przez zmniejszanie szerokości czy marginesów.<br>
<br>
<br>
<br>
Kiedy wrap faktycznie pomaga, a kiedy maskuje problem Zawijanie przydaje się w galeriach, listach kart, formularzach z przyciskami obok siebie i paskach nawigacji. Zamiast liczyć, ile elementów zmieści się w rzędzie, pozwalamy przeglądarce zrobić to samodzielnie. Wystarczy dać dzieciom elastyczną podstawę, na przykład flex: 1 1 220px, i odstęp przez gap. Kontener z display: flex; flex-wrap: wrap; gap: 16px sam zdecyduje, ile kolumn pokazać. Uwaga na justify-content: przy zawijaniu ostatni rząd bywa wyrównywany inaczej niż poprzednie, co potrafi rozjechać siatkę i wygląda jak błąd, choć nim nie jest.<br>
<br>
<br>
<br>
Element z display: block zachowuje się jak akapit czy nagłówek. Zajmuje całą dostępną szerokość kontenera, a kolejny element block zaczyna się w nowej linii. Możesz mu swobodnie ustawiać width, height, margin i padding. Typowe błędy? Ustawianie szerokości na 100% i dodawanie paddingu bez box-sizing: border-box — wtedy element wystaje poza rodzica. Drugi częsty problem to próba ustawienia dwóch bloków obok siebie za pomocą samych marginesów; bez float, flex lub grid to się nie uda.<br>
<br>
<br>
<br>
Najczęstsza pułapka polega na tym, że flex-wrap włącza się, ale nic się nie zawija, bo elementy nadal mają narzucone flex-shrink: 1 albo sztywne szerokości w pikselach. Kontener najpierw próbuje zmieścić wszystko w jednej linii, ściska dzieci, a dopiero gdy ich minimalna szerokość przekroczy dostępną przestrzeń, przenosi je dalej. Efekt bywa mylący: na szerokim ekranie układ wygląda dobrze, a na wąskim nagle pęka w nieprzewidywalnym miejscu. Warto wtedy sprawdzić, czy elementy mają ustawione flex: 0 0 auto lub konkretną wartość flex-basis, bo to one decydują o momencie zawijania.<br>
<br>
<br>
<br>
inline-block zachowuje się jak inline (elementy stoją obok siebie), ale pozwala ustawiać width, height, marginesy i padding bez ograniczeń. To idealne rozwiązanie do przycisków, elementów nawigacji czy kart w rzędzie. Uwaga na typowy błąd: białe znaki w kodzie HTML między elementami inline-block tworzą dodatkowe odstępy. Można je usunąć, komentując spacje lub ustawiając font-size: 0 na rodzicu, a potem przywracając go na dzieciach.<br>
<br>
<br>
<br>
Podsumowując: block to pełna szerokość i nowa linia, inline to płynięcie w tekście bez kontroli wymiarów, inline-block to połączenie obu z pełną kontrolą rozmiaru. Zanim sięgniesz po zaawansowane techniki, sprawdź, czy przypadkiem nie walczysz z domyślnym displayem elementu. Zmiana jednej linijki w CSS bywa skuteczniejsza niż godziny przesuwania marginesów.<br>
<br>
<br>
<br>
Zanim sięgniesz po media queries, sprawdź, czy flex-wrap: wrap nie załatwia sprawy. Dobrze dobrany flex-basis plus gap daje układ, który sam się dostosowuje, bez ręcznego sterowania szerokościami. Jeśli jednak elementy nadal się ściskają, problem prawie nigdy nie leży w samym wrapie, tylko w narzuconych ograniczeniach szerokości lub w sztywnym min-width u dzieci. Usunięcie tych ograniczeń zwykle przywraca spodziewane zawijanie.<br>
<br>
<br>
<br>
Na koniec: position: relative na przodku to nie jedyny wybór. Absolute respektuje także przodków z position: absolute, fixed i sticky. Jeśli kontener ma position: sticky, absolutny potomek będzie się pozycjonował względem niego, ale przy przewijaniu zachowa się inaczej niż przy relative. Przed wdrożeniem warto sprawdzić układ w narzędziach deweloperskich, podświetlając kontener i potomka, i upewnić się, że to właśnie ten kontener jest najbliższym przodkiem z position.