Position absolute bez relative u przodka psuje cały układ

Przydatny trik: w panelu stylów wpisz właściwość z wartością tymczasową, żeby sprawdzić układ, a potem skopiuj gotowy fragment do schowka i wklej go do pliku. Uważaj na jednostki — przeglądarka przyjmie wpis bez jednostki, ale w arkuszu może zostać zinterpretowany inaczej. Nie zmieniaj też jednocześnie wielu właściwości, bo nie będziesz wiedzieć, która dała efekt. Jedna zmiana, jeden test.

Ustawienie position: absolute na elemencie nie działa w próżni. Taki element pozycjonuje się względem najbliższego przodka, który ma ustawione position inne niż static. Jeśli żaden przodek takiego position nie ma, punktem odniesienia staje się obszar początkowy dokumentu, czyli w praktyce cała strona. To najczęstsza przyczyna sytuacji, w której element zamiast siedzieć w prawym górnym rogu karty, wylatuje gdzieś na sam szczyt okna przeglądarki.

Białe znaki między elementami inline-block to jeden z najczęstszych powodów, dla których układ „nie chce" się ułożyć tak, jak wynika to z obliczeń. Przeglądarka traktuje każdy znak nowej linii, tabulacji i spacji w kodzie jako zwykłą spację w tekście. Jeśli obok siebie stoją dwa elementy inline-block, ta spacja zajmuje miejsce i wypycha drugi element w prawo lub do nowej linii. Efekt jest szczególnie widoczny przy trzech i więcej kafelkach ustawionych w rzędzie — ostatni spada poniżej, mimo że szerokości mieszczą się w kontenerze.

Plik zapisany jako index.html leży na dysku jak każdy inny dokument. Dwuklik na takim pliku nie łączy się z żadnym serwerem — system odczytuje rozszerzenie .html i uruchamia program przypisany do tego typu plików, najczęściej domyślną przeglądarkę. Adres widoczny w pasku zaczyna się wtedy od file://, a nie od http, co oznacza, że strona jest wczytywana wprost z twojego komputera.

Zacznij od . To znacznik przeznaczony na główną treść danego widoku i na stronie powinien występować tylko raz. Wszystko, co powtarza się na kolejnych podstronach – logo, menu, stopka – zostaje poza nim. Częsty błąd to wrzucanie do całego szkieletu, razem z nagłówkiem witryny i nawigacją. Wtedy znacznik przestaje cokolwiek opisywać, bo obejmuje dokładnie to samo co . Drugi błąd to kilka elementów na jednej stronie, co wprowadza sprzeczność.

Warto też wiedzieć, że border-box nie działa wstecznie. Jeśli masz gotowy projekt oparty na content-box, nagła zmiana może popsować układ. Wprowadzaj ją etapami i testuj. W narzędziach deweloperskich przeglądarki możesz podejrzeć, jak liczona jest szerokość – to najszybszy sposób na weryfikację. Dzięki border-box szerokość wreszcie się zgadza, a Ty przestajesz zgadywać, ile pikseli faktycznie zajmie element.

Najczęstszy błąd to walka ze stylem, który jest nadpisany przez regułę o wyższej specyficzności albo przez ważność. Inspektor przekreśla takie właściwości, więc zamiast poprawiać niewłaściwy wiersz, sprawdź, która reguła faktycznie działa. Druga pułapka to edycja w widoku zgodności z urządzeniem mobilnym — zmiany wprowadzone przy wąskim viewporcie mogą nie odpowiadać temu, co widzisz na szerokim ekranie, bo inne media queries wchodzą w grę.

zamyka sekcję lub stronę i zwykle zawiera informacje uzupełniające: dane kontaktowe, prawa autorskie, powtórzone menu. Uwaga na pułapkę – nie musi być tylko jeden. Możesz go umieścić wewnątrz artykułu, żeby oddać przypisy lub źródła. Problem pojawia się, gdy autorzy wstawiają stopkę poza albo zagnieżdżają ją w , przez co główna treść miesza się z informacjami pobocznymi. Trzymaj jako rodzeństwo , a nie jego część.

Na koniec rzecz, o której większość zapomina: nagłówki – wewnątrz tych elementów muszą tworzyć logiczne poziomy. strony zwykle zawiera , ale artykułu już nie – tam wystarczy . Zagnieżdżanie bez wcześniejszego psuje strukturę dokumentu. Zanim uznasz szablon za gotowy, sprawdź, czy jest jeden, czy opisuje realną nawigację i czy nie pełni funkcji głównego pojemnika. Te cztery znaczniki nie zdobią strony – one mówią, czym ona jest.

Najczęstszy błąd to stosowanie border-box tylko do wybranych elementów. Jeśli ustawisz go na kontenerze, ale nie na jego dzieciach, nadal możesz mieć niespodzianki. Najlepiej od razu ustawić globalnie: *, *::before, *::after box-sizing: border-box; . To prosty zabieg, który eliminuje większość problemów z wymiarami. Uwaga na stare skrypty lub style zewnętrzne, które mogą nadpisywać tę właściwość – sprawdź, czy nie ma konfliktów.

Osobna pułapka to wysokość przodka. Element absolutny nie wpływa na wysokość rodzica, bo jest wyjęty z przepływu. Kontener z position: relative i samymi dziećmi absolutnymi może mieć wysokość zero i zniknąć z widoku, mimo że dzieci są widoczne. Jeśli zależy ci na tym, żeby rodzic obejmował zawartość, ustaw mu minimalną wysokość albo użyj innych technik, np. grid lub flex, a absolute zostaw tylko dla elementów, które naprawdę mają być oderwane od przepływu.