Pozycja relatywna {position: relative}

W jaki sposób przesunąć dowolny element strony o podaną odległość?

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 {position: relative}

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

width: 100px; height: 75px; position: relative; left: 50px; top: 45px

Przykład pozycjonowania tekstu:

To jest tekst powiększony
To jest pozycjonowane pogrubienie tekstu

Pozycjonowanie tabel:

komórka1	komórka2
komórka3	komórka4

komórka1	komórka2
komórka3	komórka4

komórka1	komórka2
komórka3	komórka4

Pozycjonowanie odsyłaczy (możesz je klikać):

Pozycjonowanie relatywne
Pozycjonowanie absolutne
Nakładanie

Pytania i odpowiedzi {position: relative}

Jak ustawić pozycję w CSS?

Pozycję elementu w CSS można ustawić za pomocą właściwości position. Najczęściej używane wartości to static (domyślna pozycja), relative (pozycja względem pierwotnej lokalizacji), absolute (pozycja względem pierwszego przodka z pozycją inną niż static) i fixed (pozycja względem okna przeglądarki).

Co to jest "position" w CSS?

position w CSS to właściwość, która określa sposób pozycjonowania elementu na stronie. Ta właściwość ma kilka możliwych wartości, które kontrolują zachowanie pozycji elementu względem innych elementów na stronie.

Co to jest "position: relative"?

"position: relative" w CSS oznacza, że element pozostaje w swojej pierwotnej przestrzeni na stronie, ale jego pozycję można dostosować za pomocą właściwości top, right, bottom lub left. To umożliwia przesunięcie elementu względem jego pierwotnej pozycji.