Własność CSS top

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

Wartości i składnia

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

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

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