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.
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.
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.
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 jest interpretowane przez Mozillę i Operę i Internet Explorera 7, ale nie 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.