Właściwości pozycji
- static – domyślna wartość, element nie ma określonej pozycji względem czegokolwiek,
- relative – wartość umożliwia nadanie elementowi nowej, relatywnej pozycji względem tej, którą posiada domyślnie jako ‘static’,
- absolute – jaka sama nazwa mówi to pozycja absolutna elementu względem elementu nadrzędnego, który ma wartość pozycji inną niż ‘static’,
- fixed – to dokładna pozycja elementu HTML uwzględniając całe okno przeglądarki.
sharp-chaplygin-8c3mt
sharp-chaplygin-8c3mt by danielminschinski
a teraz przejdźmy do szczegółów 🔽
Div-y relatywne
Wartość relative nic nie zmieni w sposobie wyświetlania danego elementu. Aby cokolwiek uległo zmianie należy określić położenie elementu względem jego domyślnej, obecnej pozycji.
Tworzymy to za pomocą dodatkowych właściwości CSS:
- top – określa położenie względem jego startowej górnej krawędzi (np. top: 20px;),
- right – określa położenie względem prawej krawędzi,
- bottom – określa odległość od dolnej krawędzi,
- left – określa położenie względem lewej krawędzi.
Zaletą tych pozycji jest to, że możemy względem początkowego położenia przesunąć element. Jednak nawet po przesunięciu nadal będzie zajmował miejsce które zajmował przed zmianą położenia. W związku z tym, elementy z pozycją relatywną najczęściej są wykorzystywane jako kontenery dla elementów z pozycją absolutną. Poniżej dodaję przykład zastosowania:
blazing-brook-xl98r
blazing-brook-xl98r by danielminschinski
Elementy HTML absolutnie pozycjonowane
Pozycja absolutna pozwala ustawić element HTML względem jego rodzica, w którym element jest zagnieżdżony.
Uwaga: Rodzic musi mieć inną pozycję niż statyczną, aby position: absolute; dało efekt.
Pozytywnym efektem pozycjonowania absolutnego jest brak wpływu na inne elementy znajdujące się w tym samym kontenerze. Nachodzi on na całą zawartość niezależnie od tego jaka ona jest. Przeróbmy poprzedni przykład:
angry-thunder-2tt82
angry-thunder-2tt82 by danielminschinski
Zwróć uwagę, że niebieski box uciekł od układu. Fioletowe boxy ustawiły się tak jakby między nimi nie było elementu z pozycją absolutną.
Przyklejony nagłówek
Często potrzebujemy żeby element HTML był zawsze widoczny, pomimo przewijania treści strony. Stosuję się taki zabieg w przypadku nawigacji strony lub przycisków portali społecznościowych, które zazwyczaj są przyklejone do lewej lub prawej krawędzi strony.
W poniższym przykładzie dodałem do selektora .header następujący styl: position:fixed;. Nagłówek rozciągnąłem na całą stronę dzięki właściwości left: 0; oraz right: 0; Można również określić położenie nagłówka względem wyświetlanej strony w procentach, np. top: 30%; (nagłówek obniży się o 30% względem strony).
intelligent-cookies-m30f4
intelligent-cookies-m30f4 by danielminschinski
…oraz Stopka
Biorąc na tapetę nagłówek i ustawiając go na górze, to tak samo można u dołu umieścić na stałe stopkę strony. Takie proste ustawienie sprawi, że w trakcie przewijania strony stopka będzie cały czas w tym samym miejscu.
Aby tak się stało musimy w naszym przykładzie dodać oczywiście stopkę oraz ją ostylować w odpowiedni sposób. Spójrz na przykład:
festive-fire-ivxfi
festive-fire-ivxfi by danielminschinski
Ty “na wierzchu” a Ty “pod spodem”!
Podczas pozycjonowania elementów, jeden element może ukrywać drugi. Ostatecznie należy podjąć decyzję, który ma być “na wierzchu” a który “pod spodem”.
Aby określić powyższą sytuację, należy użyć właściwości CSS – z-index. Element HTML który ma z-index z wyższą wartością liczbową ten będzie “wyżej”. Własność z-index działa tylko i wyłącznie dla pozycjonowanych elementów (nie statycznych).
Przykładowo: .element1 {z-index: 0;} będzie wyświetlany pod elementem .element2{z-index: 1;}
Zobrazujmy sobie omawianą właściwość:
amazing-ptolemy-hgl80
amazing-ptolemy-hgl80 by danielminschinski
Ćwiczenie
- Stwórz nowy projekt w codesandbox.
- Dodaj diva z klasą “container”.
- W środku diva dodaj kolejne divy z klasami kolejno: “header” z zawartością “Header”, “nav” z zawartością “Navigation” oraz “section” z przykładową treścią oraz klasa “footer” z zawartością “Footer”.
- W stylach dodaj do ciała strony margines zerowy.
- Dla diva dodaj właściwości: box-sizing: border-box; obramowanie na sześć px oraz linie ciągłą, padding 20px oraz wyśrodkowanie tekstu.
- Kontenerowi ustaw zerowy padding, wyłącz obramowanie oraz ustaw pozycję na relatywną.
- Obramowanie nagłówka ostyluj na niebiesko a nawigacji na zielono.
- Nawigację ustaw na pozycję absolutną z szerokością 200px.
- Obramowanie tekstu z klasą .section ostyluj na fioletowo z lewym marginesem wynoszącym 200px.
- Obramowanie stopki ustaw w kolorze złotym, zafiksowaną pozycją oraz lewy, prawy oraz dół z własnością zerową.
Wiem – trochę czekaliście na kolejnego posta ale wiecie, wakacje, troszkę oddechu trzeba było złapać. Postaram się regularniej dodawać kolejne tematyczne posty – tzn. post na tydzień!
Mam kilka pomysłów, aby rozszerzyć zakres materiałów dodawanych na bloga. Jak wiecie, od początku dodaję podstawy drogi Frontend Developera – podstaw programowania. Jednak równolegle myślę o tworzeniu kolejnego źródła wiedzy, tzn. bardziej zaawansowanej drogi – dla tych co już mieli styczność z programowaniem. Chciałbym rozdzielić te dwie drogi osobnymi działami. Myślę że niedługo zacznę pracować nad tym pomysłem.
Ale jak na razie skupiam się na kolejnym poście – Grid i wszystko jasne?
Do następnego!
Polecam zapisywać się do Newslettera oraz śledzenia Fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA