### Odległości

Pozycjonowanie absolutne i względne jest realizowane za pomocą parametrów left, right, top i bottom, którym przypisujemy jednostki miary, np. piksele, centymetry czy procenty.

Jak widzieliśmy to już w podanych przykładach, możemy zastosować takie definicje, jak:

`<P style="position:relative; left:10%">Przykładowy akapit</P>`

Przykładowy akapit

`<IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" style="position:relative; right: 5cm">`

Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów:

<img src="ami.gif" width=80 height=114 border=0 alt=" ">
<div style="position: relative; top: -84px; left: 30px"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div>
<div style="position: relative; top: -168px; left: 60px"><img src="pcq.gif" width=80 height=114 border=0 alt=" "></div>

Wyjaśnienie konstrukcji:

Obrazki mają 80 pikseli szerokości i 114 pikseli wysokości. Blok DIV powoduje ustawianie ich jeden pod drugim. Chcemy jednak, aby kolejne obrazki były przesunięte o 30 pikseli w dół i w prawo w stosunku do poprzedniego. Pierwszy obrazek można wstawić bez definiowania pozycji. Drugi obrazek jest ustawiany pod pierwszym, Musimy więc "cofnąć" go o 84 piksele w górę (114-30), a także przesunąć w prawo o 30 pikseli. Trzeci obrazek musimy przesunąć w górę już o 114+114-60 pikseli, czyli top: -168px. Trzeba go także przesunąć w prawo o 60 pikseli, czyli left: 60px.

Jak widać, powstaje jednak "dziura", którą można zlikwidować, podciągając do góry pozostałe elementy na stronie.

W analogiczny sposób można nakładać na siebie bloki tekstu:

`<font size="+4" color="#FF0000">To jest jakiś tam tekst</font> <div style="position:relative; left: 200px; top: -30px"><font size="+3" color="#FFCCFF">To jest inny tekst</font></div>`

To jest jakiś tam tekst
To jest inny tekst