Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pozycjonowanie

Email Drukuj PDF

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; ">Treść akapitu</p>
<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, Chrome

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>

  • 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, Chrome

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.

Sufi w kwiatach

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.

Sufi w kwiatach

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, Chrome

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.

<div style="position:fixed; top:5em; right:10em; border:dotted 1px; padding:5px; background-color:transparent;">
<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>
Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V