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>

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.

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>