Pozycja elementów w CSS

Artykuł  | Mirosław Zelent

Możemy wpływać na położenie elementów (czyli ich pozycję na ekranie względem wybranego układu odniesienia), z użyciem właściwości: left, right, top, bottom. Przyjrzyjmy się dostępnym rodzajom pozycjonowania elementów:

{ 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ą.

{ position: relative; }

Stosując pozycjonowanie relatywne elementu pozostawiamy przewidziane dla niego miejsce we 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.

{ 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).

{ 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żeni – jak to mówimy – “ustala się” permamentnie.

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!