Własność CSS left

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

Wartości i składnia

Własność left 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ść left określa odległość zewnętrznej krawędzi marginesu lewego elementu pozycjonowanego od wewnętrznej lewej 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ść left określa odległość zewnętrznej krawędzi marginesu lewego elementu pozycjonowanego od lewej krawędzi pola, które zostało dla niego utworzone w układzie normalnym.
• Elementy przyklejone (własność position ustawiona na sticky): własność left określa odległość docelową lewej krawędzi elementu pozycjonowanego od lewej 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ść left ma wartość auto, a własność right jakąkolwiek inną, to element jest pozycjonowany zgodnie z ustawieniem własności right. 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 lewej krawędzi okna przeglądarki.

aside {
  position: fixed;
  left: 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