CSS · lekcja 09

Poza normalnym przepływem

Do tej pory każdy element stawał tam, gdzie wyznaczał go normalny przepływ dokumentu. Dziś uczymy się to zmieniać właściwością position.

Normalny przepływ - jak przeglądarka układa elementy, zanim cokolwiek ustawicie
position i jej pięć wartości: static, relative, absolute, fixed, sticky
top/right/bottom/left - jak dokładnie przesunąć element
z-index - który element leży na wierzchu

Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

Która pseudoklasa pokazuje styl pola dopiero po kliknięciu w nie lub wybraniu klawiszem Tab?
Które dwie właściwości najczęściej ustawiacie razem, żeby przycisk miał zaokrąglone rogi i inne tło?
Co sygnalizuje użytkownikowi cursor: pointer na przycisku?

Część 1 · normalny przepływ

Zanim cokolwiek ustawicie

Jeżeli nie napiszecie żadnej reguły CSS dotyczącej układu, przeglądarka sama układa elementy w tzw. normalnym przepływie. Elementy blokowe (np. div, p, h2) zajmują całą dostępną szerokość rodzica i ustawiają się jeden pod drugim. Elementy liniowe (np. span, a, strong) zajmują tylko tyle miejsca, ile potrzebuje ich treść, i stoją obok siebie w jednej linii.

MDN: „Elements on a webpage lay out in normal flow if you haven't applied any CSS to change the way they behave” · „block-level elements are laid out vertically... each one separated by whatever margin that's been specified” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Introduction

Część 2 · position: cztery wartości

Ta sama kropka, cztery światy

Właściwość position decyduje, jak bardzo element odrywa się od normalnego przepływu. static to wartość domyślna. relative zostawia element w przepływie, ale pozwala go przesunąć. absolute wyjmuje element z przepływu całkowicie. fixed przypina element do okna przeglądarki, niezależnie od przewijania.

MDN: „Static positioning is the default that every element gets... nothing special to see here” · „An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer” · „Fixed positioning fixes an element in place relative to the visible portion of the viewport” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Positioning

Część 3 · position: relative

Przesunięcie względem własnego miejsca

position: relative nie wyjmuje elementu z przepływu - miejsce, które by zajął, zostaje puste. Właściwości top/right/bottom/left przesuwają go od tego miejsca. Uwaga: top: 20px przesuwa element o 20 pikseli w dół, nie w górę - to niewidzialna siła, która popycha wskazaną krawędź w przeciwną stronę.

.badge {
  position: relative;
  top: 20px;
  left: 10px;
}

MDN: „Relative positioning... once the positioned element has taken its place in the normal flow, you can then modify its final position” · „You need to think of it as if there's an invisible force that pushes the specified side of the positioned box, moving it in the opposite direction” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Positioning

Część 4 · position: absolute

Względem rodzica z position: relative

position: absolute wyjmuje element z normalnego przepływu całkowicie - staje się osobną warstwą. Przeglądarka szuka najbliższego przodka (rodzica, dziadka…) z ustawionym position innym niż static. Od jego krawędzi liczy wtedy top/right/bottom/left. Jeśli żaden przodek nie ma ustawionego position, element liczy się od całej strony.

MDN: „An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else” · „We can change the positioning context... by setting positioning on one of the element's ancestors” · „If no ancestor elements have their position property explicitly defined... the absolutely positioned element will be contained in the initial containing block” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Positioning

Część 5 · position: fixed i sticky

Element, który nie ucieka przy przewijaniu

position: fixed przypina element do widocznego okna przeglądarki - zostaje w tym samym miejscu na ekranie, nawet gdy przewijacie całą stronę. Tak działają stałe menu nawigacyjne. position: sticky to hybryda: element zachowuje się jak relative, dopóki podczas przewijania nie dotrze do wskazanego progu (np. top: 0), a wtedy „przykleja się” i zachowuje jak fixed.

header {
  position: sticky;
  top: 0;
}

Ciekawostka z MDN: position: sticky nie zawsze działało bez dodatku. Starsze przeglądarki oparte na silniku WebKit (dawny Safari) rozumiały tylko zapis position: -webkit-sticky, zwykła wartość sticky doszła później. W przykładach MDN nadal można zobaczyć obie linijki jedną pod drugą, na wszelki wypadek.

MDN: „Fixed positioning fixes an element in place relative to the visible portion of the viewport... persistent navigation menus that are always visible no matter how much the page scrolls” · „This is basically a hybrid between relative and fixed position. It allows a positioned element to act like it's relatively positioned until it scrolls to a certain threshold... after which it becomes fixed” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Positioning · ciekawostka: developer.mozilla.org/en-US/docs/Web/CSS/position

Część 6 · z-index

Kto leży na wierzchu?

z-index działa tylko na elementach z ustawionym position innym niż static. Decyduje, który z nich leży wyżej, gdy się nakładają - jak stos kartek na biurku, gdzie wyższy numer leży bliżej Was. Domyślnie każdy pozycjonowany element ma z-index: auto, czyli efektywnie 0.

MDN: „z-index values affect where positioned elements sit on that axis; positive values move them higher up the stack, negative values move them lower down the stack. By default, positioned elements all have a z-index of auto, which is effectively 0” · „Higher values will go above lower values” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Positioning

CSS · egzamin

Tak pytają na egzaminie

1. Wartości: static, relative, fixed, absolute oraz sticky można przypisać do właściwości

display.
position.
list-style-type.
text-transform.

CKE, EE.09, czerwiec 2020, zadanie 32

Ćwiczenie · przy komputerze · 15 minut

Ćwiczenie: position w praktyce

W style.css ustaw dla nagłówka strony position: sticky i top: 0 - ma zostać widoczny przy przewijaniu.
Owiń zdjęcie kontenerem z position: relative, a wewnątrz dodaj małą etykietę z position: absolute i top/right, żeby usiadła w jego rogu.
Zapisz, F5, przewiń stronę i sprawdź obie zmiany.

Pamiętajcie: position: absolute działa względem najbliższego przodka z ustawionym position - bez position: relative na kontenerze znaczek odleci względem całej strony.

Pytania kontrolne

Trzy pytania na koniec

Czym różni się position: relative od position: static?
Względem którego elementu pozycjonuje się element z position: absolute, jeśli jego rodzic ma ustawione position: relative?
Który element na stronie najczęściej dostaje position: fixed lub sticky i dlaczego?

To tyle na dziś: pierwsza połowa tematu kontroli położenia gotowa. Na następnej lekcji: obok siebie - float dawniej, flexbox dziś.

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`position: absolute` liczone od strony, gdy zapomni się o rodzicu	Kontener zawsze dostaje świadomie `position: relative` - to standardowy wzorzec „positioning context”	nadal w użyciu
Sztywne menu na górze strony budowane wyłącznie `position: fixed`	`position: sticky` tam, gdzie ma się to dziać dopiero po dotarciu do danego miejsca strony - mniej kolizji z resztą układu niż `fixed`	nadal w użyciu
Układanie kolumn obok siebie przez `position: absolute` i ręczne `top`/`left`	Flexbox i CSS Grid do układów wielokolumnowych - `position` tylko do drobnych elementów (etykiety, okienka, menu)	zastąpione
Ręcznie dobierane wartości `z-index` (10, 100, 9999…)	Ustalona skala `z-index` w systemie projektowym (np. tło/treść/menu/modal/tooltip) - zapobiega „wyścigowi liczb”	rozbudowane

Rekomendacja Flexbox/Grid do układów: MDN, moduł CSS_layout, strony „Flexbox” i „Grids”