Fixed czy sticky — która metoda utrzyma nagłówek na ekranie
Praktyczna zasada: każde article powinno mieć własny nagłówek (np. h1–h6). section również wymaga nagłówka, chyba że jest to sekcja czysto pomocnicza. Bez nagłówka tracisz dostępność i czytelność dla robotów wyszukiwarek. Pamiętaj, że section nie może być pusty — jeśli nie masz dla niego nagłówka, użyj div.<br>
<br>
<br>
<br>
Chcesz rozdzielić marginesy? Wstaw między bloki coś, co je fizycznie oddzieli: obramowanie, wypełnienie albo przerwę w przepływie dokumentu. Pamiętaj jednak, że dowolny z tych dodatków wpływa na szerokość i wysokość, więc przy układach opartych na procentach sprawdź, czy nie rozjedzie się siatka. Alternatywa to przejście na odstępy oparte wyłącznie na jednym marginesie — wtedy wynik jest przewidywalny, a ty nie musisz pamiętać o kolejności bloków.<br>
<br>
<br>
<br>
Inny częsty powód to nieprzerywalna treść. Długi wyraz bez spacji albo ciąg znaków bez miejsca podziału wymusza minimalną szerokość równą jego długości. Wtedy pomaga dodanie gdzieś w treści możliwości łamania: overflow-wrap: anywhere, word-break: break-word albo wstawienie znaku zerowej szerokości. Uważaj na word-break: break-all, bo łamie wyrazy w dowolnym miejscu i psuje czytelność. Lepiej stosować łagodniejsze rozwiązania, które dopuszczają podział tylko wtedy, gdy naprawdę brakuje miejsca.<br>
<br>
<br>
<br>
Typowe błędy? Używanie section jako zamiennika div dla stylowania — to nadużycie. Drugi błąd to wstawianie article wewnątrz innego article bez sensu (np. dla zwykłego akapitu). Zagnieżdżanie jest poprawne, gdy np. komentarz pod postem jest osobnym article wewnątrz głównego article. Trzeci błąd: brak nagłówków w section — to psuje strukturę dokumentu.<br>
<br>
<br>
<br>
Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.<br>
<br>
<br>
<br>
Wybór sprowadza się do jednego pytania: czy nagłówek ma być przyklejony zawsze, czy tylko chwilowo. Fixed daje stałą obecność i wymaga ręcznego odstępu w układzie. Sticky działa w granicach kontenera, nie zaburza przepływu i lepiej znosi zmiany szerokości. Zacznij od sticky, a po fixed sięgnij wtedy, gdy naprawdę potrzebujesz belki widocznej przez cały czas.<br>
<br>
<br>
<br>
Elementy ustawione jako inline-block zachowują się jak znaki w wierszu tekstu — siadają na linii bazowej, a nad nimi zostaje miejsce na górną krawędź jak przy literach z wydłużeniami. Dlatego dwa pola o tej samej wysokości potrafią wyglądać nierówno: jedno opiera się na dolnej linii, drugie wisi wyżej albo niżej. Zanim zaczniesz przesuwać je marginesami, sprawdź, co dzieje się w pionie między ich dolną krawędzią a linią bazową rodzica.<br>
<br>
<br>
<br>
Element wewnątrz kontenera flex nie zmniejsza się poniżej rozmiaru swojej treści, bo domyślnie działa minimalna szerokość automatyczna. Właściwość flex-shrink mówi tylko, o ile element ma się skurczyć względem innych, gdy brakuje miejsca w kontenerze. Nie jest jednak w stanie pokonać ograniczenia, które wynika z zawartości: długiego słowa, nieprzerywalnego ciągu znaków, obrazka czy pola formularza. Przeglądarka najpierw ustala minimalny rozmiar treści, a dopiero potem rozdziela wolne miejsce. Dopóki ten minimalny rozmiar jest większy niż przydzielona przestrzeń, element się nie zmniejszy — nawet jeśli ustawisz flex-shrink na dużą wartość.<br>
<br>
<br>
<br>
W nowoczesnych układach problem często znika sam, gdy używasz właściwości odstępu między elementami zamiast marginesów. Jeśli pracujesz na marginesach, ustal jedną wartość i stosuj ją tylko po jednej stronie bloku — na przykład wyłącznie na dole. Wtedy zapadanie przestaje być pułapką, a staje się matematyką, którą łatwo przewidzieć przed napisaniem pierwszej linii stylu.<br>
<br>
<br>
<br>
Typowe błędy to walka z objawem zamiast przyczyny. Przesuwanie elementów position: relative z wartościami w pikselach działa do pierwszego skalowania ekranu i zmiany fontu. Zerowanie line-height na rodzicu bez przywrócenia go w dzieciach ucina tekst. Mieszanie float z inline-block w jednym wierszu rozjeżdża wyrównanie, bo float wypada z normalnego przepływu i nie bierze udziału w ustawianiu linii bazowej. Jeśli układ ma być naprawdę odporny, rozważ flexbox z align-items: center albo baseline — nowsze przeglądarki obsługują to bez sztuczek.<br>
<br>
<br>
<br>
Na wąskich ekranach nagłówek fixed zajmuje cenne miejsce. Rozważ zmniejszenie jego wysokości po przewinięciu albo ukrycie mniej ważnych elementów. Pamiętaj też o dostępności: przyklejony nagłówek nie może przechwytywać fokusu klawiatury ani zasłaniać treści po skoku do kotwicy. Dodaj scroll-margin-top do celów linków wewnętrznych, żeby po kliknięciu nagłówek nie przykrywał nagłówka sekcji. Testuj na prawdziwym telefonie, nie tylko w zwężonym oknie przeglądarki — różnice w paskach adresu i klawiaturze ekranowej zmieniają zachowanie sticky.