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=" ">
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>