Jesteś tutaj: Główna → Teksty → Bezwzględnie względny

Bezględnie względny

Poniższy tekst jest tłumaczeniem artykułu Tommy'ego Olssona pt. Relatively Absolute.

Tworzenie stron internetowych oznacza zazwyczaj coś więcej niż określenie czcionek, kolorów i elementów graficznych. Z tworzeniem stron wiąże się również określenie pewnej kompozycji. Projektant stron posiada trzy środki pomocne w tworzeniu kompozycji. Są to:

Układy strony oparte na tabelach królowały w poprzednim tysiącleciu. Elementy pływające są często najlepszym rozwiązaniem, osobliwie wtedy, gdy nie wiadomo z góry, która z kolumn będzie najdłuższa. Niestety, starsze przeglądarki oraz Internet Explorer mają problemy wizualizacją elementów pływających. Jest to zresztą temat na osobny artykuł.

Pozycjonowanie z kolei jest jednym z najczęściej mylnie interpretowanych aspektów wersji 2 CSS. Przyjrzyjmy się zatem nieco bliżej temu, jak ono działa.

Pozycjonowanie bezwzględne określane jest czasem mianem CSS-P. Początkujący użytkownicy Dreamweavera mają zwyczaj nazywać je warstwami, co jest to o tyle niefortunne, że mianem <layer> określany jest jeden ze znaczników wprowadzonych przez Netscape.

Zacznijmy jednak od początku. Właściwość position może przyjmować cztery (nie licząc inherit) wartości:

Dla wszystkich wartości - oprócz static - programista ma możliwość zmiany położenia modyfikując wartości właściwości top, bottom , left oraz right.

Pozycjonowanie statyczne

Elementy, którym przypisano position:static (co jest wartością domyślną dla wszystkich elementów pojawiających się na stronie), nie są w ogóle pozycjonowane. Ich położenie na stronie jest uzależnione od kolejności ich występowania w kodzie.

Tak więc wartość static jest używana jedynie do nadpisywania poprzednio nadanych wartości.

Mimo, że termin pozycjonowany statycznie nie jest do końca poprawny, będziemy się nim posługiwać.

Pozycjonowanie względne

Elementy, którym przypisano wartość position:relative są pozycjonowane względem siebie samych. Definicja brzmi nieco dziwnie, ale określa ona bardzo przydatną właściwość.

Jeśli podamy jedną z czterech wartości "krawędziowych", element spozycjonowany względnie zostanie przesunięty względem pozycji, którą zajmowałby, gdyby był położony statycznie.

Brzmi to może niezrozumiale, po wnikliwszym przyjrzeniu się jest jednak całkiem logiczne. Jeśli bowiem przypiszemy elementowi position:relative bez podania żadnej wartości "krawędziowej", to zostanie on wyświetlony dokładnie w tym samym miejscu, co przy określeniu wartości position:static lub bez podania position.

Jeśli z kolei elementowi przypiszemy wartość top:10px, to zostanie on przesunięty o 10 pikseli względem swojej górnej krawędzi w dół. Wartość ujemna oznacza przesunięcie w kierunku przeciwnym, tak więc efekt podobny do opisanego powyżej osiągnelibyśmy podając bottom:-10px. Stąd można wysunąć wniosek, że nie ma sensu podawać wartości zarówno top, jak i bottom lub, analogicznie, left oraz right. Z kolei, specyfikowanie wartości dla właściwości top oraz left jest w pełni uzasadnione, jeśli chcemy dany element przesunąć w kierunku poziomym i pionowym.

To wszystko nie jest przydatne przy określaniu kolumn strony, ponieważ obiekt spozycjonowany względnie jest nadal uwzględniany w układzie strony - tam, gdzie znajdował się pierwotnie. Ciągle zajmuje miejsce: nie tam, gdzie jest wyświetlany, ale tam, gdzie byłby wyświetlony, gdyby był nadal spozycjonowany statycznie.

Co to dla nas oznacza? Pozycjonowanie względne jest użyteczne wtedy, gdy istnieje potrzeba przesunięcia jakiegoś obiektu o kilka pikseli, w pionie lub w bok. Przy przesunięciach o większe wielkości powstanie dziura. Istnieje jednak drugi, ważniejszy, aspekt pozycjonowania elementów w sposób względny: element spozycjonowany względnie, nawet jeśli nie jest przesunięty o choćby piksel, został spozycjonowany. Za chwilę przekonamy się dlaczego jest to istotne.

Zobacz, jak wygląda element spozycjonowany względnie

Pozycjonowanie bezwzględne

Tym, co normalnie rozumie się przez pozycjonowanie, CSS-P lub warstwy, są elementy z przypisaną wartością position:absolute. Właściwości top, bottom, left i right określają odległości elementu od ... właśnie - od czego?

Tak naprawdę, pozycjonowanie bezwględne jest względne. Element spozycjonowany bezwzględnie jest umiejscowiony względem jakiegoś innego elementu, zwanym blokiem obejmującym . Zanim podamy definicję tego terminu, prosimy o zaczerpnięcie kilku głębokich oddechów i złapanie się mocno za oparcia krzesła.

Blokiem obejmującym elementu spozycjonowanego w sposób bezwzględnie jest jego najbliższy spozycjonowany przodek, lub, w przypadku braku takiego elementu, blok pierwotnie obejmujący dokumentu.

Przez termin spozycjonowany rodzic rozumiemy element nadrzędny strukturalnie, którego właściwości position przypisano wartość absolute, fixed lub relative. Tutaj właśnie okazuje się, czemu względne pozycjonowanie elementów jest tak istotne. Nadając bowiem elementowi wartość position:relative możemy (bez przesuwania tego elementu choćby o piksel) określić nowy kontekst, względem którego - w sposób już bezwzględny - będziemy definiować położenie elementów mu podrzędnych.

A co jeśli nie ma spozycjonowanego elementu nadrzędnego? Wówczas pałeczkę przejmuje tak zwany pierwotny blok obejmujący. Specyfikacja CSS podaje, że w takim przypadku jest on określany przez agenta użytkownika (agent użytkownika to aplikacja wizualizująca stronę internetową - jest to najczęściej przeglądarka, ale może to być również wyszukiwarka bądź inny program wspomagający przeglądanie stron). W specyfikacji wzmiankuje się również, że jako pierwotny element obejmujący można określić ekranowe okienko; w praktyce oznacza to element BODY bądź HTML.

Elementy umiejscowione bezwzględnie są usuwane z przepływu treści. Oznacza to, że nie zajmują one w ogóle miejsca. Inaczej mówiąc, nie mają wpływu na następujące po nich elementy. W gestii programisty leży więc zadbanie o to, by żaden z elementów nie znalazł się pod innym, uprzednio spozycjowanym (chyba, że jest to zamierzony efekt).

Podsumowując, górna krawędź elementu umiejscowionego bezwzględnie za pomocą wartości top:100px znajduje się w odległości 100 pikseli od górnej krawędzi zawierającego go bloku. W przeglądarkach zgodnych ze specyfikacją CSS możliwe jest podanie wszystkich czterech wartości i pozostawienie obliczenia wartości silnikowi przeglądarki. Niestety, ta metoda nie działa w Inernet Explorerze, tak więc w przypadku pozycjonowania elementu w sposób bezwzględny trzeba podać dodatkowo jego szerokość.

Dopuszczalne jest przypisywanie wartości ujemnych właściwościom określającym pozycję; jeśli jednak z tego korzystamy, należy zwrócić uwagę na to, gdzie dokładnie znajduje się blok obejmujący. Może bowiem się okazać, że pozycjonowany przez nas element znajdzie się częściowo lub całkowicie poza ekranem.

Zobacz, jak wygląda element spozycjonowany bezwzględnie

Pozycjonowanie sztywne

Nie będzie teraz zaskoczeniem - po wcześniejszym stwierdzeniu, że pozycjonowanie bezwzględne jest tak naprawdę względne - jeśli napiszemy, że pozycjonowanie sztywne jest w istocie pozycjonowaniem absolutnym z małymi różnicami.

Element, któremu przypisano wartość position:fixed jest umiejscowiany bezwględnie względem okna przeglądarki. Położenie obiektu jest zawsze obliczane względem okna ekranowego i właśnie ono jest blokiem obejmującym. Element spozycjonowany sztywno jest usuwany z przepływu treści i jest zawsze wyświetlany, nawet wtedy, gdy użytkownik przewija stronę.

Niestety, Internet Explorer nie obsługuje sztywnego pozycjonowania. Istnieją, owszem, mniej lub bardziej skomplikowane metody obejścia tego problemu, jednak z powodu niskiej przydatności pozycjonowania sztywnego, nie warto się nimi zajmować. Oczywiście - jest wygodnie mieć menu wyświetlone z lewej bądź prawej strony, jednak użytkownicy są raczej przyzwyczajeni do tego, że zawartość strony przewija się na ich żądanie.

Zobacz, jak wygląda element spozycjonowany w sposób sztywny.

W końcu!

Pozycjonowanie bezwzględne jest przydatne w tworzeniu wielokolumnowych układów stron, o ile wiadomo, która kolumna będzie najdłuższa. Ponieważ elementy spozycjonowane w ten sposób są usuwane z przepływu treści, nie mają wpływu na elementy następujące po nich. Stąd ciężko jest na przykład uzyskać efekt stopki o pełnej szerokości strony wyświetlonej pod wszystkimi kolumnami.

Podobnie jak w przypadku innych aspektów tworzenia stron internetowych, warto jest używać jednostek względnych, ponieważ pozwoli to dostosować wygląd strony do różnych rozmiarów okienek. Przykładowo, wartość dla left powinna być wyrażona w em lub %, a nie px.

W przypadku, gdy podamy szerokość elementu pozycjonowanego bezwzględnie, już to wprost za pomocą width wyrażonej w procentach, już to pośrednio, przy użyciu left oraz right, specyfikacja standardów nakazuje liczyć ją względem obejmującego bloku. Niestety, zarówno Internet Explorer, jak i Opera, nie spełniają wymagań specyfikacji i liczą szerokość względem rodzica. Przeglądarki oparte na silniku Gecko (np. Mozilla i Firefox) działają w takiej sytuacji prawidłowo.

W przypadku wszystkich typów pozycjonowania należy podawać wartości marginesów, zarówno wewnętrznych, jak i zewnętrznych, w szczególności jeśli zależy nam na tym, by strona wyglądała tak samo we wszystkich przeglądarkach. Różne przeglądarki przyjmują bowiem różne standardowe wartości dla tych własności.

Gdy elementy nakładają się na siebie, programista ma kontrolę nad kolejnością w jakiej to się odbywa dzięki własności z-index; im większa jest przypisana jej wartość, tym "bliżej" użytkownika dany element się znajduje. Nie jest to jednak tak do końca proste, ponieważ sam blok obejmujący również ustala z-index dla swojego kontekstu. Chcąc więc umiejscowić jeden element na drugim, zagnieżdżonym w innym bloku obejmującym, należy zwiększyć z-index bloku obejmującego zawierającego pierwszy element. W naprawdę złożonych układach często można znaleźć się w sytuacjach bez wyjścia; przykładowo: nie znamy rozwiązania problemu umiejscowienia trzech elementów na sobie, z których środkowy znajduje się w innym bloku obejmującym niż pozostałe dwa.

Pozycjonowanie bezwzględne często jest używane z warstwami DIV, ale można go oczywiście używać z dowolnym elementem.

Tommy Olsson