Pozycjonowanie

Relatywne

selektor { position: relative; parametry }

Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "parametry" należy podać:

left: wartość - odległość od lewej krawędzi położenia spoczynkowego
top: wartość - odległość od górnej krawędzi położenia spoczynkowego
right: wartość - odległość od prawej krawędzi położenia spoczynkowego
bottom: wartość - odległość od dolnej krawędzi położenia spoczynkowego

Wyraz "wartość" oznacza konkretną odległość (od podanej krawędzi) względem położenia elementu bez używania pozycjonowania - położenie spoczynkowe. Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Można również wpisać auto, co ustali wartość automatyczną.

Można oczywiście łączyć parametry, np. left: 1cm; top: -10px. Należy jednak pamiętać o tym, że parametr left ma pierwszeństwo przed right (jeśli kierunek tekstu jest "ltr" - od lewej do prawej), natomiast top ma pierwszeństwo przed bottom. To znaczy jeśli np. podamy: left: 1cm; top: 2cm; right: 3cm; bottom: 4cm, to wartości right oraz bottom zostaną zignorowane.

Polecenie pozycjonowania relatywnego (względnego) pozwala przesunąć wybrany element w dowolną stronę względem jego położenia spoczynkowego, czyli pozycji gdy nie używamy żadnego pozycjonowania.

Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki!

Przykład:

Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia spoczynkowego o 50px (pikseli), a od górnej o 45px.

Położenie spoczynkowe