Wpływanie na pozycję elementu: position

Z pomocą CSS możemy wpływać na położenie elementów (czyli ich pozycję na ekranie względem wybranego układu odniesienia), z użyciem "ustawiających" właściwości: left, right, top, bottom - na przykład:

 .jeden
{
position: absolute;
left: 5%;
top: 25px;
}

.dwa
{
position: absolute;
right: 10%;
bottom: 50px;
}

Przyjrzyjmy się jednak przede wszystkim dostępnym rodzajom pozycjonowania elementów:

Pozycja statyczna

 position: static; 

Domyślna wartość position to static - pozycja statyczna. Przy takim ustawieniu właściwości left, right, top czy bottom są ignorowane - w ogóle nie będą działać! Dopiero jeżeli ustawimy pozycję relative, absolute albo fixed to właściwości left, right, top, bottom zadziałają:

 .jeden
{
position: static; // wartość domyślna, więc i tak obowiązuje
left: 5%; // nie zadziała dla pozycji statycznej!
top: 25px; // nie zadziała dla pozycji statycznej!
}

.dwa
{
position: absolute;
right: 10%; //pozycja inna niż static - zadziała!
bottom: 50px; //pozycja inna niż static - zadziała!
}

Pozycja relatywna

 position: relative; 

Stosując pozycjonowanie relatywne elementu pozostawiamy przewidziane dla niego miejsce w tzw. flow witryny (miejsce to staje się jednocześnie nowym układem odniesienia dla elementu), po czym aplikujemy nowe położenie (określone właściwościami left, right, top lub bottom). W strukturze witryny zawsze pozostaje "wyrwa" w miejscu sprzed przemieszczenia.

Pozycja absolutna

 position: absolute; 

Stosując pozycjonowanie absolutne elementu nie pozostawiamy przewidzianego dla niego miejsca we flow witryny (nowym układem odniesienia staje się lewy górny narożnik płótna przeglądarki, no chyba że element pozycjonowany absolutnie znajduje się wewnątrz pojemnika pozycjonowanego relatywnie), po czym aplikujemy nowe położenie (określone właściwościami left, right, top lub bottom). W strukturze witryny nie pozostaje żadna "wyrwa" w miejscu przewidzianym pierwotnie we flow witryny (element zostaje całkowicie z tego flow wyjęty).

Pozycja ustalona

 position: fixed; 

Podobnie jak w pozycjonowaniu absolutnym nie pozostawiamy we flow witryny miejsca przewidzianego na element, natomiast różnica polega na tym, iż pozycja określona przez współrzędne left, right, top lub bottom utrzymuje się także przy przewijaniu dokumentu (w praktyce położenie – jak to mówimy – "ustala się" permamentnie.

Podobnie jak w pozycjonowaniu absolutnym nie pozostawiamy we flow witryny miejsca przewidzianego na element, natomiast różnica polega na tym, iż pozycja określona przez współrzędne left, right, top lub bottom utrzymuje się także przy przewijaniu dokumentu (w praktyce położenie – jak to mówimy – "ustala się" permamentnie.

Więcej informacji na temat różnych sposobów pozycjonowania znajdziesz także w tym odcinku kursu video (tak naprawdę artykuł niniejszy stanowi pomocne notatki do tegoż video).

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 02.12 do 08.12 trwają Mikołajki (książki drukowane mają rabat -35%, zaś ebooki do -45%). Zaś dodatkowy, specjalny kod zniżkowy: HELMIKOLAJ-10 dla naszych Widzów zapewni Wam oszczędność -10zł dla zamówień powyżej 70zł! Warto korzystać!

Bądź na bieżąco
Pasja informatyki