#18. Pierwsze pozycjonowanie elementów na stronie www

Właściwości pozycji

Chcemy pozycjonować jedne elementy HTML względem innego elementu lub mamy pomysł na “przyklejenie” go na stałe. Jak mamy to zrobić?
Poznajmy właściwość CSS position która operuję na następujących wartościach:
  • 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.
Poniżej dodaje przykład, który pokaże nowo poznaną właściwość:

 

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

  1. Stwórz nowy projekt w codesandbox.
  2. Dodaj diva z klasą “container”.
  3. 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”.
  4. W stylach dodaj do ciała strony margines zerowy.
  5. 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.
  6. Kontenerowi ustaw zerowy padding, wyłącz obramowanie oraz ustaw pozycję na relatywną.
  7. Obramowanie nagłówka ostyluj na niebiesko a nawigacji na zielono.
  8. Nawigację ustaw na pozycję absolutną z szerokością 200px.
  9. Obramowanie tekstu z klasą .section ostyluj na fioletowo z lewym marginesem wynoszącym 200px.
  10. Obramowanie stopki ustaw w kolorze złotym, zafiksowaną pozycją oraz lewy, prawy oraz dół z własnością zerową.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

distracted-lalande-ebnyp

distracted-lalande-ebnyp by danielminschinski

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