Ostatnia aktualizacja: 

Position: 
Pozycjonowanie elementów na stronie

W tym wideo przedstawię Ci najważniejsze aspekty właściwości position w CSS

RWD
CSS
Ćwiczenia
Tutorial
Position
Pozycjonowanie stron
10m 14s
60355+ wyświetleń
1516+ pozytywnych reakcji
102+ komentarzy

Dlaczego warto poznać position?

Właściwość position to potężne narzędzie do pozycjonowania naszych stron WWW, zwłaszcza w sytuacjach kiedy wiemy gdzie dany element ma się znajdować.

Zobacz listę rozdziałów dla tego materiału

Karty przeniosą Cię do kolejnych sekcji w wideo.

Opinie

Komentarze widzów

Wasze opinie liczą się najbardziej, materiały Tworzymy dla was!
Oto wybrane komentarze które zostawiliście pod tym wideo!

  • Solidna dawka wiedzy. Tylko muszę to jeszcze przetrawić i przemyśleć, żeby porządnie do głowy weszło. Dzięki.

    Arturo Arcik
    Zobacz komentarz
  • Świetny materiał, bardzo przydatny (jak zwykle z resztą). Podoba mi się sposób, w jaki prezentowane (i tłumaczone) są treści w Waszych wideo. Prosto, obrazowo i konkretnie. Pozdrowienia!

  • Jedyny filmik, który dobrze jest wytłumaczony. Ładne przykłady pokazane, bez chaosu. Tylko konkretnie co i jak. A zwłaszcza w języku polskim. Super!

  • jak zawsze świetny filmik, więcej osób powinno udostępniać Wasze materiały wśród znajomych bo wciąż za mało macie widzów jak na taką jakość materiału :)

  • WoW! Kapitalnie zrobione lekcje. Najlepsze jakie do tej pory widziałem na poslkim YT.  Trzymajcie poziom! Możecie polecic jakąś książkę która wg was jest wartościowa w zakresie css3?

  • Serio fajny ten kanał. Bardzo często znajduje to czego potrzebuje

  • Mega pomocny materiał :)

  • Bardzo przydatny film! dziękuję! :)

Transkrypt wideo

Kliknij by pominąć tę sekcję

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.

Sprawdź swoją wiedzę w quizie o position!

Pytanie 1 / 3

Której wartości position użyjesz, by przykleić element po osiągnięciu konkretnej pozycji paska przeglądarki?

Zobacz wyniki
arrow_forward
{ "lead": "Sprawdź swoją wiedzę w quizie o position!", "quiz": [{ "question": "Której wartości position użyjesz, by przykleić element po osiągnięciu konkretnej pozycji paska przeglądarki?", "options": [{ "value": "static", "correct": false }, { "value": "sticky", "correct": true }, { "value": "relative", "correct": false }, { "value": "absolute", "correct": false } ] }, { "question": "Której pozycji użyjesz, jeśli chcesz przesunąć element o kilka pikseli w którąkolwiek stronę, względem jego aktualnej pozycji?", "options": [{ "value": "absolute", "correct": false }, { "value": "sticky", "correct": false }, { "value": "fixed", "correct": false }, { "value": "relative", "correct": true } ] }, { "question": "Która pozycja sprawi, że element będzie zawsze w tym samym miejscu, niezależnie pozycji scrollbara przeglądarki?", "options": [{ "value": "fixed", "correct": true }, { "value": "static", "correct": false }, { "value": "absolute", "correct": false }, { "value": "sticky", "correct": false } ] } ] }

Wsparcie position według CanIUSE

Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)

Data on support for the mdn-css__properties__position feature across the major browsers

Zobacz kod źródłowy

Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :) 

10 kwietnia 2022

Komentarz od autora

Do tej pory jest to jeden z najlepszych materiałów które udało mi się stworzyć na Koduje - liczby mówią same za siebie, jest to ważny temat i materiał rozwija wiele wątpliwości związanych z pozycjonowaniem!

Po 5 latach od publikacji, zmieniło się przede wszystkim tyle, że position: sticky jest już o wiele lepiej wspierane, oraz część zadań które wtedy prawdopodobnie najlepiej było rozwiązywać poprzez pozycjonowanie absolutne - może zostać rozwiązana przy pomocy np. CSS Grid i układaniu kilku elementów siatki jeden na drugim.

Dziękuję wam, za tyle pozytywnych reakcji!

Zamyślony Wojtek w czarnej koszuli
Dla edukacji

Pobierz Tę stronę

Podoba Ci się ta strona? Możesz pobrać ją w formie ćwiczenia PDF!

Poznaj Wojtka

Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.

Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.

Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.

Chcesz więcej?

Nie ma sprawy! Koduje to długie godziny darmowej treści dostępnej na wyciągnięcie ręki.

Newsletter

Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.

Najczęściej zadawane pytania

Jaka tematyka jest poruszana na Koduje?
expand_more
Mówimy o HTML, CSS i JavaScript - zarówno na backendzie, jak i frontendzie. Tematyka taka jak Devops, architektura i infrastruktura oprogramowania również pojawią się na kanale!
Czy mogę zaproponować temat kolejnych wideo?
expand_more
Oczywiście, że tak! Najlepiej sugerować materiały w sekcji komentarzy na YouTube 
Jak to możliwe, że Koduje jest darmowe? 
expand_more
Moją pasją jest dzielenie się wiedzą w sposób zrozumiały i klarowny, jednocześnie interaktwny i angażujący. Tworząc materiały, utrwalam też własną wiedzę. Wierzę, że za to widzowie nie powinni płacić
W sieci można znaleźć strony przypominające do koduje.pl, o co chodzi?
expand_more
Niestety, na przełomie lat wiele osób próbowało podszyć się pod Koduje i wykorzystać nasze materiały do promocji własnych kanałów dystrybucyjnych.  Jeśli masz wątpliwości, czy dana strona współpracuje z Koduje - daj nam o tym znać. Nie pochwalamy piractwa, plagiatu ani szarej strefy prawa autorskiego.
Czy prowadzicie szkolenia indywidualne?
expand_more
W chwili obecnej, niestety nie. Na przełomie lat prowadziłem kursantów przez ich przygodę z programowaniem, z czego każdy otrzymał pracę jako programista. Jeśli jesteś zainteresowany lekcjami indywidualnymi, zapraszam do kontaktu mailowego.
Czy oferujecie płatne kursy?
expand_more
W przyszłości nie wykluczamy możliwości tworzenia dedykowanych kursów o danych zagadnieniach. Zapisz się na nasz newsletter, aby być na bieżąco z naszymi najnowszymi płatnymi materiałami.
Jak mogę się z wami skontaktować?
expand_more
Czytamy komentarze na YouTube! Śmiało możesz zadać pytanie na dowolny temat pod którymkolwiek z naszych wideo. Poza tym możesz skontaktować się z nami mailowo bądź poprzez fanpage na Facebooku
Obecnym właścicielem marki jest Wojciech Połowniak. Zobacz zakładkę o nas!