Własność CSS right

Własność CSS right określa położenie w poziomie elementu pozycjonowanego za pomocą własności position. Wyznacza jego odległość od prawego punktu odniesienia, który może być różny w zależności od rodzaju pozycjonowania.

Wartości i składnia

Własność right przyjmuje jedną z następujących wartości:

Liczba z jednostką długości

Ta wartość może być dodatnia, ujemna lub zerowa, a jej dokładne znaczenie zależy od rodzaju pozycjonowania elementu:

• Elementy pozycjonowane absolutnie (własność position ustawiona na absolute lub fixed): własność right określa odległość zewnętrznej krawędzi marginesu prawego elementu pozycjonowanego od wewnętrznej prawej krawędzi obramowania jego bloku zawierającego, w odniesieniu do którego jest on pozycjonowany.
• Elementy pozycjonowane względnie (własność position ustawiona na relative): własność right określa odległość zewnętrznej krawędzi marginesu prawego elementu pozycjonowanego od prawej krawędzi pola, które zostało dla niego utworzone w układzie normalnym.
• Elementy przyklejone (własność position ustawiona na sticky): własność right określa odległość docelową prawej krawędzi elementu pozycjonowanego od prawej krawędzi elementu stanowiącego jego kontekst pozycjonowania.

Wartość procentowa

Działa według takich samych zasad, jak wartości liczbowe, a jej konkretna wartość jest obliczana na podstawie wysokości bloku zawierającego.

Słowo kluczowe auto

Jeśli własność right ma wartość auto, a własność left jakąkolwiek inną, to element jest pozycjonowany zgodnie z ustawieniem własności left. Jeśli obie te własności są ustawione na auto, to element w ogóle nie zostaje przesunięty w poziomie względem swojej pozycji początkowej.

Przykład

Poniższa reguła sprawi, że element aside zawsze będzie zajmował miejsce przy prawej krawędzi okna przeglądarki.

aside {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 20rem;
  border: 4px solid black;
}

Więcej przykładów użycia kierunkowych własności CSS w różnych rodzajach pozycjonowania znajduje się w kursie CSS w rozdziale Pozycjonowanie elementów w CSS.

Podsumowanie