Cześć, w tym wideo opowiem wam co nieco, o właściwości position w CSSie.

[ intro kodu.je ]
‍
W wielu naszych nagraniach, wykorzystujemy właściwość position w CSSie, dlatego w tym konkretnym wideo przybliżymy wam, jak ona dokładnie działa.

Załóżmy, że dysponujemy takim oto markupem
Klasa container pozycjonuje swoje dzieci na flexie,
oraz odpowiada za zawijanie ich do następnego wiersza,
natomiast boxy są to po prostu puste divy o wysokości 100x100px,
białym tle i marginesach z prawej strony i z dołu.
‍
Więc o co chodzi z position?
Przy pomocy tych właściwości możecie manipulować położeniem danego elementu,
niezależnie od jego markupu.
‍
Załóżmy, że na kontenerze "box", dodamy sobie klasę "rel", jak skrót od relative. Dodamy sobie nową regułę do naszego pliku "style.css"
i ustawimy mu position na relative.
‍
Aby go łatwiej zidentyfikować, może ustawmy mu kolor na zielony z palety barw koduje.

Jak widzicie, w tym momencie nadanie samego position: relative,
nie wpłynęło w żaden sposób na pozycję naszego elementu
Jeśli chcielibyśmy go troszkę przesunąć,
możemy wykorzystać do tego właściwości takie jak top, right, left, czy bottom.
‍
Zadziałają one w ten sposób, że przesuną ten element od strony konkretnej krawędzi,
o podaną wartość, czyli ustawimy sobie np. top na 10px
i jak zauważyliście, ten box zszedł nam niżej, o właśnie tę wartość.
‍
Jeśli damy wartości ujemne, to box będzie o 10px wyżej,
w stosunku do swojej startowej pozycji w markupie
Analogicznie możemy kontrolować oczywiście pozycje z prawej strony, z lewej, no i tak samo możemy pozycjonować od dołu,
więc position relative i konkretne wartości top, right, bottom i left,
dają nam możliwość przesunięcia danego elementu względem jego startowej pozycji.
‍
Obecnie jednak ten efekt można uzyskać przy pomocy transforma,
używając translateX i translateY,
jeśli chcemy przesunąć box względem jego pozycji startowej w markupie
i oczywiście nie musimy ustawiać tego position: relative, aby to zrobić.

Kiedyś transforma nie było, robiło się to własnie na pozycjonowaniu relatywnym i powiedzmy, że na razie to tyle, jeśli chodzi o relative.
‍
Jeśli zmienimy sobie wartość pozycji na absolute,
to jak zobaczycie, coś zmieniło się w naszym podglądzie.
‍
Po pierwsze - mamy jednego boxa mniej
Dlaczego mamy jednego boxa mniej?
‍
Otóż nadanie pozycji absolutnej danemu elementowi HTMLowemu,
sprawia, że on wyskakuje nam z normalnego porządku elementów na stronie.
‍
Czyli, jeśli byśmy sobie go ustawili teraz na bottom, na zero,
to widzicie - on nam wskoczy tutaj na sam dół
Ponieważ powiedzieliśmy przeglądarce, że ten element powinien być wypozycjonowany od dołu
i mieć odstęp od tej krawędzi o wartości zero.
‍
Dlatego właśnie wskoczył on nam na sam dół
Natomiast jeśli przełączymy sobie właściwość position: absolute,
to jak widzicie on wraca nam na swoje miejsce.
‍
Czyli tak naprawdę te elementy przestały widzieć ten element,
no i wypozycjonowały się tak jakby tego zielonego elementu w tym miejscu nie było, więc flex nam po prostu przesunął te wszystkie białe boxy z dołu o 1 w lewo, więc używając pozycjonowania absolutnego, możemy ustalać położenie danego elementu,
niezależnie od jego markupu.

Jeśli damy sobie tutaj teraz right: 0, to on nam oczywiście wskoczy wprawą część ekranu,
możemy też dawać wartości procentowe, czy wartości w pikselach
No i powinniśmy zmienić sobie tutaj tę regułę w tym momencie z rel na absolute, może zróbmy tak, to jest absolute,
no i względem czego my pozycjonujemy ten element?
‍
Jak czytamy w dokumentacji CSSa w wersji 2.1,
elementy pozycjonowane absolutnie, są ułożone względem czegoś,
co nazywa się documents initial containing block,
ma on rozmiary viewportu i tyle wystarczy nam wiedzieć w tym konkretnym momencie.
‍
Więc co jeśli chcielibyśmy aby ten box z linijki 20 był w prawym dolnym rogu diva o klasie container?
Jeśli teraz sobie to zrobimy, ustawimy sobie botom na zero i right na zero,
no to widzimy, że oczywiście, nie mieści się to w tym naszym containerze, tak? Bo container ma takie wymiary.
‍
Otóż możemy ustawić właśnie na containerze position: relative
i w tym momencie jak zobaczycie, bez tych właściwości,
nasz box jest wypozycjonowany do tego initial containing blocku,
natomiast position relative układa się w środku tego naszego diva container.
‍
Dlaczego to się tam tak wyświetla?
Otóż jak widzicie, te boxy mają oczywiście tutaj jeszcze margines,
gdybyśmy go sobie tutaj wyzerowali,
no to on jest oczywiście całkowicie w prawym dolnym rogu tego naszego elementu.
‍
Dlaczego position: relative sprawiło tak naprawdę, że ten nasz box zmienił swoje położenie? Otóż wg. specyfikacji CSSa, elementy,
które są wypozycjonowane absolutnie, odnoszą się w swoim ułożeniu do najbliższego rodzica, który nie posiada position: static, to jest to co widzicie by default, w przeglądarce jak tutaj sobie dam position: static, to on nam wróci na swoje miejsce.
‍
Jest to o tyle wygodne, że możemy pozycjonować dzieci danego elementu, niezależnie od markupu, a sam container nie zmienia się wizualnie w zależności od tego, czy ma te position: relative, czy nie.

Kolejną ciekawą rzeczą jest to, że jeśli ustawicie teraz width na 100%,
to zobaczycie, że ten div z klasą absolute, zajmuje teraz 100% szerokości swojego rodzica, oczywiście ma jeszcze ten margines, dlatego nam wychodził poza box. Więc jeśli stworzycie sobie jeszcze height na 100%,
to ten nasz box o klasie container, jest w 100% zasłonięty tym naszym absolutnym divem.

Ma identycznie takie same wymiary jak rodzic
Oczywiście moglibyście tutaj dać sobie z-index, na -1
i jak zobaczycie, teraz ten div jest rodzeństwem dla pozostałych boxów,
a mimo to może działać jako np. właśnie tło dla nich.
‍
Tak więc, jak widzicie możliwości są naprawdę duże,
jeśli chodzi o pozycjonowanie. Osobiście, bardzo często używam pozycjonowania absolutnego,
właśnie w tej formie, że rodzic ma position: relative, a dany element ma pozycję absolutną,
np. w pseudoelementach, czyli jeśli chcielibyśmy sobie zrobić, że to nasz before,
na elemencie absolutnym ma mieć takie wymiary
i ustawimy, że sam element, sam div, tak?

Posiada position: relative, to możemy np. ustawić właśnie jakąś ikonkę np. w prawym, górnym rogu ekranu, a oczywiście sam box, samego diva również możemy przesuwać, załóżmy o 20px i ten nasz before zostanie też wypozycjonowany względem swojego rodzica.
‍
Cofniemy sobie te zmiany. Bardzo podobne do position: absolute, jest position: fixed. Jeśli ustawicie sobie fixed zamiast absolute,
to po pierwsze zobaczycie taką różnicę, że jest on wypozycjonowany, nie względem rodzica,
pomimo tego, że tutaj mamy position: relative na kontenerze.
‍
Jest on wypozycjonowany względem okna przeglądarki. To jest pierwsza z różnic.
Drugą dosyć ważną rzeczą jest to, że w momencie gdybyśmy wyrzucili ułożenie naszych elementów na flexie,
tak żeby to były po prostu bloki i jechały z góry na dół,
to możecie zobaczyć, że przy scrollowaniu nasz element absolute,
może zmieńmy nazwę na special, żeby nie być uzależnionym od wartości właściwości position.
‍
Pamiętajcie aby nie nadawać swoim klasom nazw reprezentujących ich wizualne położenie, kolor, czy nazwę wartości w CSS, aby właśnie uniknąć tego rodzaju problemów.

Wracając, tak więc jeśli nadamy naszemu boxowi position: fixed,
wtedy ten element zostaje w prawym górnym rogu ekranu.
Natomiast gdybyście zrobili sobie tutaj position: absolute
i załóżmy wyrzucili position: relative,
tak aby ten element był właśnie wypozycjonowany względem okna przeglądarki, to przy scrollowaniu on nam zostaje na górze,
więc position: fixed, jest bardzo fajne w momencie, gdy chcemy stworzyć taki element użytkownika, który po scrollowaniu zostaje w tej samej pozycji, czyli np. jakiś modale, odnośniki do social media, czy wiele innych elementów nawigacyjnych, jak chociażby menu górne, które kiedy właśnie zjedziecie na dół witryny, pozostaje dalej widoczne.
‍
Ostatnią ciekawą właściwością dla position jest position: sticky
Uprzedzam, że ta wartość nie jest jeszcze najlepiej wspierana przez wszystkie przeglądarki, więc pamiętajcie, aby ewentualnie używać stosownych polyfilli.
‍
Tak więc wyrzućmy sobie tutaj top, right i margin (to zerowanie),
ustawmy position na sticky, no i może przesuńmy w markupie nasz box na drugie miejsce.

No jak widzicie - on w tym momencie nie zmienia swojego położenia,
w zależności czy ma to position: sticky, czy nie,
natomiast ustawimy sobie może 50px od góry,
to w momencie gdy przescrollujemy w dół
i element normalnie wyjeżdżałby już poza viewport,
to on zostanie w tym miejscu.
‍
Czyli od pewnego momentu ten element wypozycjonowany normalnie,
zgodnie ze swoim markupem, tak jakby się ułożył bez żadnych modyfikacji wartości position, stanie się tak jakby fixed, zostanie w tym samym miejscu.
‍
To zachowanie jest bardzo popularne, np. na sklepach internetowych,
gdzie po przescrollowaniu, chcielibyśmy aby nasi użytkownicy dalej widzieli stan swojego koszyka,
czy jakieś dodatkowe informacje o produkcie.
‍
Zanim jednak wykorzystacie position: sticky na waszych stronach www,
koniecznie sprawdźcie wsparcie przeglądarek dla tej właściwości,
np. na caniuse.com i jeśli wasza przeglądarka nie będzie jej wspierała,
to użyjcie stosownych polyfilli.
‍
Zrozumienie właściwości position jest bardzo ważne dla każdego front-end developera, dlatego mam nadzieję, że przybliżyliśmy wam nieco to konkretne zagadnienie.
‍
Dzięki serdeczne za uwagę,
na naszym sklepie internetowym udostępniliśmy za darmo nasz webinar o node.jsie.
‍
Kliknijcie w odnośnik widoczny po lewej stronie ekranu aby go zobaczyć.

Daj lajka, nawet dwa.