Własność CSS bottom

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

Wartości i składnia

Własność bottom 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ść bottom określa odległość zewnętrznej krawędzi marginesu dolnego elementu pozycjonowanego od wewnętrznej dolnej 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ść bottom określa odległość zewnętrznej krawędzi marginesu dolnego elementu pozycjonowanego od dolnej krawędzi pola, które zostało dla niego utworzone w układzie normalnym.
• Elementy przyklejone (własność position ustawiona na sticky): własność bottom określa odległość docelową dolnej krawędzi elementu pozycjonowanego od dolnej 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ść bottom ma wartość auto, a własność top jakąkolwiek inną, to element jest pozycjonowany zgodnie z ustawieniem własności top. Jeśli obie te własności są ustawione na auto, to element w ogóle nie zostaje przesunięty w pionie względem swojej pozycji początkowej.

Przykład

Poniższa reguła sprawi, że element nav zawsze będzie zajmował miejsce pod dolną krawędzią okna przeglądarki.

nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 3rem;
}

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

Podsumowanie