Przejdź do treści

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
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órka1komórka2
komórka3komórka4
komórka1komórka2
komórka3komórka4
komórka1komórka2
komórka3komórka4

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

Pozycjonowanie relatywne
Pozycjonowanie absolutne
Nakładanie

Zobacz także

Komentarze

Zobacz więcej komentarzy