selektor { position: relative; parametry }
left: wartość
- odległość od lewej krawędzi położenia spoczynkowegotop: wartość
- odległość od górnej krawędzi położenia spoczynkowegoright: wartość
- odległość od prawej krawędzi położenia spoczynkowegobottom: wartość
- odległość od dolnej krawędzi położenia spoczynkowegoMoż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.
Przykład pozycjonowania tekstu:
To jest tekst powiększonyPozycjonowanie 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