Kurs języka HTML i CSS

Tematy: pozycjonowanie | odległości | pionowe wyrównanie | przepływanie i oblewanie | stos

Aby zdefiniować pozycję elementu, należy wpisać w definicji stylu position: wartość.

Uwaga: pozycjonowanie jest szeroko wykorzystywane w nowoczesnych stronach internetowych do tworzenia layoutów (układów) stron opartych na blokach div, dlatego konieczne jest dobre zrozumienie tego tematu. W Internecie powstało wiele serwisów poświęconych tej tematyce.

Przydatna informacja: według danych gromadzonych systematycznie przez serwis Ranking.pl, w polskim Internecie rozdzielczość ekranowa 1024x768 ma na początku 2010 r. blisko 30% objętych statystykami komputerów, zaś wyższa - prawie 70%. Dominująca kilka lat temu rozdzielczość 800x600 ma już śladowy udział. To dość istotna informacja dla osób, które przygotowują układy stron z myślą o konkretnych rozdzielczościach. Wprawdzie dobrze skonstruowana strona powinna się gładko wlewać w okno przeglądarki o dowolnej wielkości i rozdzielczości ekranowej, ale w praktyce wielkości te mają nierzadko znaczenie. Dlatego tak duży udział wysokich rozdzielczości jest istotny dla webmastera. Udział ten zresztą dość szybko rośnie w miarę wzrostu liczby dużych ekranów LCD, które systematycznie opanowują rynek.

Pozycjonowanie statyczne (static)

Jest to naturalne pozycjonowanie elementu, wynikające z kolejności wystąpienia w dokumencie HTML, na które nie ma wpływu nawet podanie odległości od innych elementów. Porównaj dwa akapity z pozycjonowaniem static, z których drugi ma dodatkową podaną odległość left:30px. Zauważ, że oba znajdują się w takiej samej odległości od lewego brzegu elementu nadrzędnego, czyli tutaj bloku.

Pozycjonowanie statyczne służy jedynie do nadpisywania wcześniej podanego pozycjonowania innego niż static.

Pozycjonowanie względne (relative)

Pozycjonowanie względne odnosi się do miejsca wstawienia definicji i wykorzystuje podane odległości. Na przykład akapit mógłby mieć nadane pozycjonowanie:

position:relative; left: 50px; top: 30px

czyli przesunięcie o 50 pikseli w prawo i 30 pikseli w dół w stosunku do naturalnego położenia elementu w dokumencie, które byłoby użyte, gdyby nie definiowano pozycjonowania względnego.

Akapit przesunięty o 50 pikseli w prawo i o 30 pikseli w dół.

Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę, a gdy left: -50px, w lewo.

Inne przykłady:

<p style="position: relative; left: 200px; top: 50px; width: 300px">Ten akapit...</p>

Ten akapit ma pozycję względną (relative), jest odsunięty od lewego marginesu o 200 pikseli i o 50 pikseli w dół. Pole akapitu ma 300 pikseli szerokości. W rzeczywistości powinien być wyświetlany zaraz pod podaną wyżej definicją, ale pozycjonowanie spowodowało przesunięcie w prawo i w dół.

<div style="position: relative; left: 200px; width: 300px">Wykaz odsunięty w prawo o 200 pikseli i mający 300 pikseli szerokości</div>

Kod pozycjonowania możemy umieszczać bezpośrednio w znaczniku elementu lub obejmować element znacznikami <span> lub <div> zawierającymi definicję pozycjonowania.

Pozycjonowanie bezwględne (absolute)

Pozycjonowanie absolutne ustala sztywno pozycję elementu w stosunku do strony (w naszym przypadku, w stosunku do bloku, w którym znajduje się cała treść - zdjęcie pieska w lewym górnym rogu bloku pokazuje takie pozycjonowanie, uzyskane dzięki podaniu odpowiednich odległości.).

Przykład - kod wstawia zdjęcie Sufi w lewym górnym rogu bloku z treścią rozdziału.

<div style="position:absolute; left:0%; top:0%">
<img src="sufi.jpg" width="56" height="51" alt="Sufi w kwiatach">
</div>

Analogicznie,
- kod z wartościami left:0%; bottom:0% wstawia zdjęcie w lewym dolnym rogu bloku
- right:0%; top:0% w prawym górnym rogu bloku
- right:0%; bottom:0% w prawym dolnym rogu bloku.

Oczywiście w tym przypadku (pozycjonowanie względem całego bloku z treścią rozdziału) kod elementu pozycjonowanego bezwględnie można wstawić w dowolnym miejscu dokumentu, gdyż nie ma to znaczenia. Istotna jest podana w kodzie pozycja elementu.

Ważne: elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów w ramach najbliższego pojemnika wyższego szczebla w hierarchii, czyli rodzica, i zajmują tam miejsce bez względu na pozycję innych elementów. Elementy te mogą się nakładać na inne elementy absolutne lub względne, które akurat się tutaj znalazły. Element pozycjonowany absolutnie wypada z normalnego przepływu dokumentu - ustawionych kolejno elementów.

Zastrzeżenie, że pozycjonowanie absolutne odnosi się do nadrzędnego pojemnika, jest bardzo istotne. Pokazane tu zdjęcia umieszczone są w rogach strony wyznaczonej przez blok div, gdyż to on jest nadrzędnym pojemnikiem. Pokażmy przykład, jak pozycjonowana byłaby grafika, gdybyśmy umieścili ją w jeszcze niższym hierarchicznie pojemniku, bloku div niższego szczebla niż strona.

Utwórzmy w tym miejscu (pozycjonowanie względne) blok zdefiniowany w następujący sposób:

<div style="position: relative; width: 400px; height: 150px; border: 1px dotted black;"></div>

Umieśćmy w nim grafikę, pozycjonowaną w następujący sposób:

<img src="sufi.jpg" width="56" height="51" alt="Sufi w kwiatach" style="position: absolute; left: 20px; top:20px">

oraz akapit spozycjonowany następująco:

<p style="position: absolute; bottom: 10%; right: 10%; border: 1px solid green; width: 200px; padding:10px;">To jest jakiś akapit.</p>

I oto efekt - zwróć uwagę, że grafika i akapit są pozycjonowane w sposób absolutny, ale w stosunku do nadrzędnego bloku div, czyli swojego rodzica, a nie w stosunku do strony, czyli odległego w hierarchii przodka.

To jest jakiś akapit.

Zalecane jest bardzo uważne i ostrożne stosowanie definicji absolutnych, aby nie popsuć widoku strony, zwłaszcza przy zmianach wielkości okna przeglądarki.

Pozycjonowanie ustalone (fixed)

Pozycjonowanie ustalone (fixed) pozwala utrzymywać element w stałej pozycji w okienku przeglądarki, np. nierzadko stosuje się tę technikę do utrzymywania w stałym położeniu elementów nawigacji. Właśnie to widoczne w Firefoksie, Operze i Internet Explorerze 7 okienko "Polskie portale" jest przykładem bloku o pozycjonowaniu fixed. Pomimo przewijania okna przeglądarki, okienko to jest cały czas widoczne. W naszym przypadku nawet nieco przeszkadza :-), ale oczywiście jest tylko ilustracją techniki.

Polecenie nie jest interpretowane przez Internet Explorera 6 lub starszego. W tym ostatnim jest traktowane de facto jako pozycjonowanie absolutne i w trakcie przewijania okna przeglądarki po prostu znika z ekranu. Dopóki udział starego Internet Explorera nie spadnie do odpowiednio niskiego poziomu, stosowanie pozycjonowania tego typu dla elementów nawigacyjnych nie do końca spełnia swoje zadanie.