Elementy pozycjonowania

Pozycjonowanie względne

Pozycjonowanie względne odnosi się do miejsca wstawienia definicji. Na przykład akapit mógłby mieć nadane pozycjonowanie:

position:relative; left: 200px; top: 50px

czyli przesunięcie o 200 pikseli w prawo i 50 pikseli w dół.

Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę.

Przykłady:

<p style="position: relative; left: 200px; top: 50px; width: 400px">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 400 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ół. Aby nie nakładał się na następny akapit, umieszczono pod nim kilka znaczników <br>.

<div style="position: relative; left: 300px; width: 400px">Wykaz odsunięty o 300 pikseli i mający 400 pikseli szerokości</div>

To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu
To jest drugi punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu
To jest trzeci 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>.