Jak ustawić bloki strony obok siebie

Prawie każdy arkusz INF.03 każe zbudować stronę z tych samych klocków: baner na górze, czasem menu, pod spodem dwa lub trzy panele obok siebie i stopka na dole. Arkusz podaje szerokości i wysokości, a obrazek pokazuje, gdzie co ma stać. Ustawienie paneli obok siebie należy do ciebie. Najczęściej robi się to przez float albo display: flex. Kurs uczy obu, a potem pokazuje display: grid i position.

• header baner
• nav menu
• aside panel boczny
• main treść
• footer stopka

Te same kolory mają bloki we wszystkich przykładach i ćwiczeniach, więc od razu widać, który jest który.

Ten sam układ dwiema technikami

aside {
  float: left;
  width: 25%;
  height: 120px;
}
main {
  float: left;
  width: 75%;
  height: 120px;
}
footer {
  clear: both;
}

#srodek {
  display: flex;
  min-height: 120px;
}
aside {
  width: 25%;
}
main {
  flex: 1;
}
/* stopka nie potrzebuje niczego */

Jak korzystać z kursu

• Lekcje idą po kolei i każda korzysta z poprzednich. Zaczynasz od znaczników, z których składa się strona. Części o float, flex i grid kończą się tym samym pełnym układem, za każdym razem zrobionym inaczej. Na koniec position, czyli nakładanie i przyklejanie elementów.
• W lekcjach są dema z przełącznikami. Zaznacz pole i zobacz, co jedna właściwość zmienia na stronie.
• Każda lekcja ma ćwiczenie. Piszesz CSS, podgląd odświeża się w trakcie pisania, a przycisk „Sprawdź” mierzy położenie bloków na stronie o szerokości 800px.
• Postęp i twoje szkice zapisują się w tej przeglądarce.

Znaczniki układu: z czego składa się strona

Zanim cokolwiek ustawisz, strona musi być podzielona na bloki. Dawniej każdy blok był znacznikiem <div> z identyfikatorem: <div id="baner">, <div id="stopka">. HTML5 dodał znaczniki, których nazwa mówi, czym blok jest. Nazywa się je semantycznymi, czyli niosącymi znaczenie.

Wszystkie znaczniki z tej lekcji zachowują się w przeglądarce identycznie: są blokami na całą szerokość, bez tła, bez ramki i bez marginesów. <header> nie ustawia się sam na górze, a <aside> nie staje sam z boku. Znacznik mówi, czym blok jest. O tym, gdzie stoi i jak wygląda, decyduje CSS i kolejność w kodzie.

<header>: baner, nagłówek

Do czego służy: część wprowadzająca. Na poziomie strony to baner z tytułem, logo i ewentualnie hasłem.

Kiedy używać: gdy arkusz mówi „baner” albo „nagłówek strony”. W środku zwykle jest <h1> z tytułem, czasem obraz logo.

Uwaga na pomyłki: <header> to nie to samo co <head> (niewidoczna część dokumentu z tytułem karty i podłączeniem stylów) ani <h1> (sam tekst nagłówka). <header> jest blokiem w <body>, w którym <h1> leży.

<nav>: menu

Do czego służy: blok z odnośnikami, którymi przechodzi się po witrynie.

Kiedy używać: dla głównego menu strony, czyli grupy odnośników do podstron albo do sekcji tej samej strony. Odnośniki mogą leżeć w nim luzem albo w liście <ul>.

Kiedy nie: pojedynczy odnośnik w tekście albo link „pobierz plik” w stopce nie potrzebują <nav>. To znacznik na nawigację, a nie na każde <a>.

<main>: główna treść

Do czego służy: to, po co użytkownik otworzył tę konkretną stronę. Wszystko, co powtarza się na każdej podstronie (baner, menu, stopka), zostaje poza nim.

Kiedy używać: raz na stronie, dla bloku z właściwą treścią. Gdy strona ma panel lewy i prawy, <main> może być kontenerem na oba albo tym z nich, który zawiera treść główną.

Zasady: tylko jeden widoczny <main> w dokumencie. Nie wkłada się go do <header>, <nav>, <aside> ani <footer>.

<section>: część treści

Do czego służy: fragment strony na jeden temat, na przykład „Oferta”, „Cennik”, „Kontakt”.

Kiedy używać: gdy blok ma własny temat i zwykle własny nagłówek <h2> lub <h3>. W arkuszach to najczęstszy znacznik dla paneli: „panel lewy”, „panel prawy”, „blok główny”.

Kiedy nie: gdy blok jest potrzebny tylko po to, żeby coś ostylować albo zgrupować. Wtedy właściwy jest <div>. Prosty test: jeśli nie umiesz nadać blokowi tytułu, to nie jest sekcja.

<aside>: treść poboczna

Do czego służy: dodatek do głównej treści. Strona bez niego dalej ma sens.

Kiedy używać: panel boczny z godzinami otwarcia, listą odnośników do innych stron, reklamą, ciekawostką, formularzem logowania obok artykułu.

Uwaga: nazwa znaczy „na marginesie” w sensie treści, a nie położenia. <aside> może leżeć pod treścią albo nad nią. Z boku stanie dopiero wtedy, gdy ustawisz go tam w CSS.

<footer>: stopka

Do czego służy: informacje zamykające: autor, rok, kontakt, odnośniki dodatkowe.

Kiedy używać: dla stopki strony. W arkuszach to blok z napisem „Stronę wykonał:” i numerem zdającego.

Uwaga: stopka jest ostatnim blokiem w kodzie, ale to, czy dotyka dołu okna, zależy już od CSS.

<div>: blok bez znaczenia

Do czego służy: do grupowania. Nie mówi nic o tym, co ma w środku.

Kiedy używać: gdy potrzebujesz pudełka wyłącznie dla CSS albo JavaScript. Najczęstszy przypadek w tym kursie to kontener, który obejmuje panele, żeby dało się na nim ustawić display: flex. Inne: ramka galerii, wiersz formularza, okno z powiększonym obrazem.

Kiedy nie: gdy istnieje znacznik, który opisuje ten blok. Baner jako <div id="baner"> zadziała tak samo, ale w arkuszu wymagającym znaczników semantycznych stracisz punkt.

div czy section: jak rozstrzygnąć

Te dwa znaczniki myli się najczęściej, bo w przeglądarce wyglądają i działają tak samo. Różnią się tylko tym, co mówią o zawartości. <section> twierdzi: „to jest osobna część treści na jakiś temat”. <div> nie twierdzi nic.

Zadaj sobie po kolei trzy pytania. Pierwsza odpowiedź „tak” kończy sprawę.

1. Czy istnieje dokładniejszy znacznik? Baner, menu, główna treść, dodatek z boku i stopka mają własne znaczniki. Wtedy ani div, ani section.
2. Czy blok ma własny temat i dałoby się go zatytułować? „Oferta”, „Cennik”, „Galeria”, „Kontakt”, „Panel lewy z listą kursów”. Wtedy <section>, najlepiej z nagłówkiem <h2> lub <h3> w środku.
3. Czy blok istnieje tylko po to, żeby coś ustawić, ostylować albo złapać w skrypcie? Wtedy <div>.

Przykłady, w których właściwy jest section

• Panel lewy z nagłówkiem „Nasze kursy” i listą kursów.
• Panel prawy z nagłówkiem „Zapisz się” i formularzem.
• Kolejne części długiej strony: „O nas”, „Cennik”, „Opinie”.
• Blok z tabelą wyników i tytułem nad nią.

Przykłady, w których właściwy jest div

• Kontener obejmujący dwa panele, żeby ustawić na nim display: flex albo zatrzymać zapadanie się rodzica.
• Blok o stałej szerokości z margin: 0 auto, który trzyma całą stronę na środku okna.
• Ramka wokół jednego zdjęcia z podpisem w galerii, kafelek produktu, wiersz formularza z etykietą i polem.
• Element, do którego skrypt wstawia wynik albo który skrypt pokazuje i ukrywa.

Oba znaczniki często występują razem i wtedy każdy robi swoje. <div> jest pudełkiem dla układu, a <section> w środku dzielą treść:

<div id="panele">            <!-- tylko po to, żeby panele stanęły obok siebie -->
  <section id="lewy">        <!-- część treści: oferta -->
    <h2>Nasze kursy</h2>
    <ul>...</ul>
  </section>
  <section id="prawy">       <!-- część treści: zapisy -->
    <h2>Zapisz się</h2>
    <form>
      <div class="wiersz">   <!-- tylko po to, żeby etykieta i pole były w jednej linii -->
        <label for="imie">Imię:</label>
        <input type="text" id="imie">
      </div>
    </form>
  </section>
</div>

Typowe błędy

• Section jako pudełko do stylowania. <section class="kontener"> wokół wszystkiego, bez tematu i bez nagłówka. To powinien być <div>.
• Div wszędzie. Strona z samych <div id="..."> działa, ale nie spełnia wymogu znaczników semantycznych.
• Section w miejscu dokładniejszego znacznika. Stopka jako <section id="stopka"> zamiast <footer>, menu jako <section> zamiast <nav>.
• Section wokół każdego akapitu. Akapit to <p>. Sekcja grupuje nagłówek z tym, co do niego należy.

Który znacznik wybrać

Jest jeszcze <article>: samodzielna całość, którą można by wyjąć ze strony i opublikować gdzie indziej, na przykład wpis na blogu, ogłoszenie, opinia klienta. W arkuszach pojawia się rzadko.

Cały szkielet strony

<body>
  <header>
    <h1>Sklep rowerowy</h1>
  </header>
  <nav>
    <a href="index.html">Start</a>
    <a href="oferta.html">Oferta</a>
  </nav>
  <div id="srodek">
    <aside>Godziny otwarcia: 9–17</aside>
    <main>
      <section>
        <h2>Nowe modele</h2>
        <p>Rowery górskie i miejskie.</p>
      </section>
    </main>
  </div>
  <footer>Stronę wykonał: 00000000000</footer>
</body>

Kolejność znaczników w kodzie jest taka jak kolejność bloków na obrazie, czytana od góry do dołu i od lewej do prawej. <div id="srodek"> nic nie znaczy, jest tu tylko wspólnym rodzicem dla panelu i treści.

Bloki i normalny przepływ

Znaczniki header, nav, main, section, aside, footer i div to elementy blokowe. Bez żadnego CSS każdy z nich zajmuje całą szerokość rodzica i staje pod poprzednim. To się nazywa normalny przepływ dokumentu. Wysokość bloku wynika z tego, co ma w środku.

<header>Baner</header>
<main>Treść</main>
<footer>Stopka</footer>

Trzy właściwości wystarczą, żeby zmienić rozmiar bloku i jego miejsce w poziomie:

Zwróć uwagę na dwie rzeczy. Blok zwężony do 60% dalej stoi sam w swoim wierszu, miejsce obok zostaje puste. Samo width nigdy nie postawi dwóch bloków obok siebie. Druga rzecz: przeglądarka sama dodaje do body margines 8px, stąd biała ramka dookoła strony. Usuwa ją body { margin: 0; }.

Dwa panele obok siebie

float: left wyjmuje blok z normalnego przepływu i dosuwa go do lewej krawędzi rodzica. Kolejny blok z float: left staje zaraz po jego prawej stronie. Tak powstają panele.

#lewy {
  float: left;
  width: 30%;
  height: 300px;
}
#prawy {
  float: left;
  width: 70%;
  height: 300px;
}

Trzy zasady, które zawsze obowiązują:

• Pływający blok kurczy się do szerokości swojej zawartości, więc każdy panel musi mieć ustawione width.
• Szerokości w jednym rzędzie nie mogą razem przekroczyć 100%. Jeśli przekroczą, ostatni panel spada do następnego wiersza.
• Float dostają wszystkie panele z rzędu. Gdy dostanie go tylko lewy, prawy blok wsuwa się pod niego, a jego tekst opływa lewy panel.

Zaznacz najpierw tylko pierwsze pole. Lewy panel dalej jest po lewej, ale prawy zaczyna się teraz od lewej krawędzi strony i chowa się częściowo pod lewym. Dopiero drugie pole ustawia oba panele w jednym rzędzie.

Stopka i clear

Pływające panele nie zajmują miejsca w normalnym przepływie. Dla stopki, która jest zwykłym blokiem, wyglądają tak, jakby ich nie było, więc stopka zaczyna się tuż pod banerem i wchodzi pod panele. Widać tylko jej tekst, który opływa panele tam, gdzie znajdzie miejsce.

clear: both każe blokowi zacząć się poniżej wszystkich pływających elementów, które stoją przed nim.

footer {
  clear: both;
}

Panele w demie mają różną wysokość. Bez clear stopka wciska się w wolne miejsce pod niższym panelem. Z clear: both zaczyna się pod wyższym.

Padding, ramka i box-sizing

Panele 30% i 70% mieszczą się w rzędzie na styk. Wystarczy dodać im padding albo border, żeby prawy panel spadł pod lewy. Powód: domyślnie width oznacza szerokość samej zawartości, a padding i ramka są doliczane na zewnątrz.

/* strona ma 800px szerokości */
#lewy  { width: 30%; padding: 20px; }  /* 240 + 20 + 20 = 280px */
#prawy { width: 70%; padding: 20px; }  /* 560 + 20 + 20 = 600px */
/* razem 880px, czyli o 80px za dużo */

box-sizing: border-box zmienia sposób liczenia. Od teraz width to szerokość całego pudełka razem z paddingiem i ramką. Tę regułę daje się wszystkim elementom naraz, selektorem gwiazdki:

* {
  box-sizing: border-box;
}

Margines nie wchodzi do width w żadnym trybie. Jeśli panele mają mieć odstęp od siebie, odejmij go od szerokości, na przykład 30% i 68% z margin-left: 2%.

Rodzic, który się zapada

Często panele są zamknięte we wspólnym bloku, na przykład <div id="kontener"> z tłem albo ramką. Wysokość bloku liczy się z zawartości, która jest w normalnym przepływie. Jeśli wszystkie dzieci pływają, to rodzic nie ma z czego jej policzyć i dostaje wysokość 0. Tło znika, ramka zamyka się w cienką linię, a panele wystają poza nią.

Są trzy sposoby, żeby rodzic objął swoje pływające dzieci. Każdy dopisuje się do rodzica:

/* clearfix */
#kontener::after {
  content: "";
  display: block;
  clear: both;
}

Trzy kolumny i float: right

Trzy panele robi się tak samo jak dwa: każdy dostaje float: left i szerokość, a suma nie przekracza 100%. Kolejność na stronie jest taka jak kolejność w HTML.

float: right dosuwa blok do prawej krawędzi rodzica. Przydaje się, gdy panel ma być przyklejony do prawej strony, a szerokości nie sumują się do 100% i między panelami ma zostać przerwa.

#lewy   { float: left;  width: 25%; }
#srodek { float: left;  width: 40%; }
#prawy  { float: right; width: 25%; }
/* 10% wolnego miejsca zostaje między środkiem a prawym */

Dwa bloki z float: right ustawiają się od prawej w kolejności z HTML: pierwszy w kodzie stoi najdalej po prawej. Jeśli chcesz uniknąć odwróconej kolejności, używaj float: left dla wszystkich i float: right tylko dla jednego, ostatniego panelu.

Cały układ na float

Masz już wszystko, czego trzeba do typowego układu z arkusza. Plan pracy jest zawsze ten sam:

1. Na górze arkusza stylów: * { box-sizing: border-box; } i body { margin: 0; }.
2. Bloki na całą szerokość (baner, menu, stopka) dostają tylko wysokość. Szerokości nie ustawiasz, bo blok sam zajmuje 100%.
3. Bloki, które stoją w jednym rzędzie, dostają float: left, szerokość w procentach i wysokość.
4. Pierwszy blok pod rzędem paneli dostaje clear: both.

<header>Baner</header>
<nav>Menu</nav>
<aside>Panel boczny</aside>
<main>Treść główna</main>
<footer>Stopka</footer>

Kolejność znaczników w HTML odpowiada kolejności na obrazie czytanej od góry do dołu, a w obrębie rzędu od lewej do prawej.

display: flex, czyli kontener i jego dzieci

We flexie właściwość ustawiasz na rodzicu, a nie na panelach. Blok z display: flex staje się kontenerem, a jego bezpośrednie dzieci ustawiają się w rzędzie od lewej do prawej.

<div id="kontener">
  <aside>Panel boczny</aside>
  <main>Treść</main>
</div>
<footer>Stopka</footer>

#kontener {
  display: flex;
}
aside { width: 30%; }
main  { width: 70%; }

W porównaniu z float znikają trzy kłopoty:

• Kontener sam obejmuje swoje dzieci. Nic się nie zapada.
• Stopka pod kontenerem jest w normalnym przepływie i nie potrzebuje clear.
• Panele w rzędzie mają równą wysokość, taką jak najwyższy z nich. Odpowiada za to domyślne align-items: stretch.

Szerokości: width i flex: 1

Element w kontenerze flex może dostać szerokość na dwa sposoby. Pierwszy to zwykłe width, w procentach albo pikselach. Drugi to flex: 1, które znaczy: weź całe miejsce, jakie zostało po pozostałych elementach.

#kontener { display: flex; }
#lewy  { width: 200px; }  /* stała szerokość */
main   { flex: 1; }       /* reszta miejsca */
#prawy { width: 150px; }  /* stała szerokość */

Jeśli flex ma kilka elementów, wolne miejsce dzieli się między nie w proporcji podanych liczb. Dwa elementy z flex: 1 dostają po połowie. Przy flex: 2 i flex: 1 pierwszy dostaje dwie trzecie, drugi jedną trzecią.

Wyrównanie: justify-content, align-items, gap

Kontener flex ma dwie osie. Oś główna biegnie w kierunku układania elementów, domyślnie poziomo. Oś poprzeczna jest do niej prostopadła, domyślnie pionowa. Każda ma swoją właściwość wyrównania i obie ustawia się na kontenerze.

Dwa zastosowania, które warto zapamiętać:

/* element dokładnie na środku rodzica */
#rodzic {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* logo po lewej, menu po prawej, oba na środku wysokości */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

justify-content rozdziela tylko wolne miejsce. Jeśli któryś element ma flex: 1, wolnego miejsca nie ma i ta właściwość nic nie zmienia.

Kierunek, zawijanie i kolejność

flex-direction ustawia kierunek osi głównej. Domyślne row układa elementy w rzędzie, column w kolumnie, jeden pod drugim. Po zmianie na column osie zamieniają się rolami: justify-content działa w pionie, a align-items w poziomie.

flex-wrap: wrap pozwala elementom przejść do następnego wiersza, gdy się nie mieszczą. Bez tego kontener ściska wszystkie w jednym rzędzie.

Właściwość order ustawia się na elemencie. Zmienia jego miejsce bez ruszania HTML. Domyślnie każdy element ma order: 0, a elementy z większą liczbą idą dalej.

Stopka przyklejona do dołu okna

Kolumna przydaje się do całej strony. Gdy treści jest mało, stopka zwykłej strony wisi w połowie okna. Żeby zawsze leżała na dole, body staje się kolumną o wysokości co najmniej całego okna, a main zabiera wolne miejsce:

body {
  min-height: 100vh;       /* 100vh = wysokość okna */
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

Cały układ na flex

Ten sam układ co w lekcji „Cały układ na float”. W HTML zmienia się jedno: panel boczny i treść są zamknięte we wspólnym bloku, który będzie kontenerem flex.

<header>Baner</header>
<nav>Menu</nav>
<div id="srodek">
  <aside>Panel boczny</aside>
  <main>Treść główna</main>
</div>
<footer>Stopka</footer>

Plan pracy:

1. Na górze: * { box-sizing: border-box; } i body { margin: 0; }.
2. Baner, menu i stopka dostają tylko wysokość.
3. Kontener dostaje display: flex i wysokość rzędu. Lepiej min-height niż height, bo wtedy rząd urośnie, gdy treści będzie więcej.
4. Panele dostają szerokości. Jeden może mieć flex: 1 i wziąć resztę.

Wysokości paneli nie ustawiasz. Rozciągają się same do wysokości kontenera.

display: grid, czyli kolumny i wiersze

Flex układa elementy w jednej linii: w rzędzie albo w kolumnie. Grid dzieli kontener na siatkę kolumn i wierszy jednocześnie, a dzieci wchodzą po kolei do jej komórek. Tak jak we flexie, właściwości siatki pisze się na rodzicu.

#kontener {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* trzy kolumny */
  gap: 20px;
}

grid-template-columns wymienia szerokości kolejnych kolumn. Ile wartości, tyle kolumn. Wierszy przybywa samych, gdy elementów jest więcej niż kolumn.

grid-template-rows działa tak samo dla wysokości wierszy. gap ustawia odstępy między komórkami. Dwie wartości oznaczają osobno odstęp między wierszami i między kolumnami.

Element na kilka komórek

Linie siatki są ponumerowane od 1. Trzy kolumny mają cztery linie pionowe: przed pierwszą kolumną, dwie w środku i za ostatnią. Właściwość grid-column na elemencie mówi, od której do której linii ma on sięgać.

#duzy { grid-column: 1 / 3; }   /* od linii 1 do linii 3, czyli dwie kolumny */
#duzy { grid-column: span 2; }  /* to samo: zajmij dwie kolumny */
#pas  { grid-column: 1 / -1; }  /* od pierwszej do ostatniej linii, cały wiersz */

grid-row robi to samo w pionie.

Cały układ na grid

W gridzie kontenerem może być samo body, bo siatka ma i kolumny, i wiersze. Nie trzeba dodatkowego bloku na panele, więc HTML jest taki sam jak w układzie na float.

Najczytelniejszy zapis to grid-template-areas. Każdy cudzysłów to jeden wiersz siatki, a słowa w nim to nazwy obszarów w kolejnych kolumnach. Nazwę powtórzoną w sąsiednich komórkach zajmuje jeden element rozciągnięty na nie wszystkie.

body {
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: 80px 40px 300px 50px;
  grid-template-areas:
    "baner  baner"
    "menu   menu"
    "bok    tresc"
    "stopka stopka";
}
header { grid-area: baner; }
nav    { grid-area: menu; }
aside  { grid-area: bok; }
main   { grid-area: tresc; }
footer { grid-area: stopka; }

Nazwy obszarów wymyślasz samodzielnie. W grid-area pisze się je bez cudzysłowu. Każdy wiersz musi mieć tyle słów, ile jest kolumn, a obszar musi być prostokątem.

W demie zmienia się tylko grid-template-areas. HTML i reszta stylu zostają te same, a bloki zamieniają się miejscami. We float i flex taka zmiana wymagałaby przestawienia znaczników.

To samo bez nazw obszarów: bloki na całą szerokość dostają grid-column: 1 / -1, a panele same wchodzą do dwóch komórek jednego wiersza.

body { display: grid; grid-template-columns: 25% 75%; }
header, nav, footer { grid-column: 1 / -1; }

position: relative i absolute

Float, flex i grid rozkładają bloki tak, żeby nie wchodziły na siebie. position służy do czegoś innego: przesuwa pojedynczy element w wybrane miejsce, także na wierzch innych. Samo miejsce podają właściwości top, right, bottom i left, czyli odległości od odpowiednich krawędzi.

Z ostatniego wiersza wynika najważniejszy wzorzec. Rodzic dostaje position: relative bez żadnych przesunięć, tylko po to, żeby stał się punktem odniesienia. Dziecko dostaje position: absolute i współrzędne liczone od krawędzi rodzica.

#karta {
  position: relative;   /* punkt odniesienia */
}
#znaczek {
  position: absolute;
  top: 10px;            /* 10px od górnej krawędzi karty */
  right: 10px;          /* 10px od prawej krawędzi karty */
}

Wypróbuj po kolei. Ustaw znaczkowi absolute oraz top i right, a karcie zostaw wyłączone relative: znaczek ucieknie do rogu całej strony. Dopiero relative na karcie sprowadza go do jej rogu. Potem przełącz znaczek na relative: przesunie się względem miejsca, w którym stał w tekście.

Kiedy tego używać

• Etykieta „Nowość” albo cena w rogu zdjęcia, podpis na obrazie, przycisk × w rogu okna.
• Rozwijane podmenu, które ma się pojawić pod pozycją menu i nie rozpychać strony.
• Element na środku rodzica: top: 50%; left: 50%; transform: translate(-50%, -50%);.

fixed, sticky i z-index

Dwie pozostałe wartości position wiążą element z oknem przeglądarki, więc widać je dopiero przy przewijaniu.

nav {
  position: sticky;
  top: 0;          /* bez tej wartości sticky nie działa */
}
#dogory {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Przewiń stronę w ramce przy każdym ustawieniu. Zwróć uwagę na fixed: menu wypadło z przepływu, więc skurczyło się do szerokości tekstu, a treść podjechała pod nie. Stąd dwie poprawki, które zawsze idą w parze z przypiętym paskiem: width: 100% na pasku i margines albo padding u góry treści, równy wysokości paska. Przy sticky nie trzeba żadnej z nich.

z-index: co jest na wierzchu

Gdy elementy na siebie nachodzą, wyżej rysuje się ten, który jest później w kodzie. z-index zmienia tę kolejność: element z większą liczbą jest na wierzchu. Działa tylko na elementach, które mają position inne niż static.

nav {
  position: sticky;
  top: 0;
  z-index: 10;     /* menu nad wszystkim, co pod nie wjeżdża */
}

Float, flex czy grid

position nie należy do tego zestawienia, bo nie służy do rozkładania bloków strony. Sięgasz po nie, gdy element ma leżeć na innym (absolute w rodzicu z relative) albo trzymać się okna (fixed, sticky).

Gdy układ się rozjechał

Quiz

Pytania w stylu części pisemnej egzaminu. Po kliknięciu odpowiedzi zobaczysz wyjaśnienie.

Ściąga

Początek każdego arkusza stylów

* { box-sizing: border-box; }
body { margin: 0; }

Float

Flex: właściwości kontenera

Flex: właściwości elementu

Grid

Position

z-index ustawia kolejność nakładania. Większa liczba jest wyżej. Działa tylko z position innym niż static.

Znaczniki układu