Tematy: pozycjonowanie | odległości | pionowe wyrównanie | przepływanie i oblewanie | stos
Dane w pigułce | |
Zastosowanie | określa pozycję elementu w stosunku do sąsiadujących elementów, do nadrzędnego pojemnika oraz w stosunku do okna przeglądarki |
Dziedziczenie | nie |
Wartości | static, relative, absolute, fixed |
Wartość domyślna | static |
Przykład | position:relative; left:20px |
Uwagi | |
Odpowiednik w HTML | brak |
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.
<p style="position:static; left:30px">Treść akapitu z dodatkową odległością</p>
Treść akapitu
Treść akapitu z dodatkową odległością
Pozycjonowanie statyczne służy jedynie do nadpisywania wcześniej podanego pozycjonowania innego niż static.
Interpretacja: Internet Explorer, Firefox, Opera, ChromePozycjonowanie 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>
- To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu
- To jest drugi punkt wykazu To jest drugi punkt wykazu
- To jest trzeci punkt wykazu To jest trzeci punkt wykazu
Kod pozycjonowania możemy umieszczać bezpośrednio w znaczniku elementu lub obejmować element znacznikami <span> lub <div> zawierającymi definicję pozycjonowania.
Interpretacja: Internet Explorer, Firefox, Opera, ChromePozycjonowanie 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.
Interpretacja: Internet Explorer, Firefox, Opera, ChromePozycjonowanie 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.
<p><strong>Polskie portale</strong></p>
<a href="http://www.onet.pl">Onet.pl</a><br>
<a href="http://www.gazeta.pl">Gazeta.pl</a><br>
<a href="http://www.wp.pl">Wirtualna Polska</a><br>
<a href="http://www.interia.pl">Interia.pl</a><br>
</div>