Atrybut top w CSS

Definicja i użycie

Atrybut top określa górny margines elementu. Definiuje on odchylenie od górnej krawędzi zewnętrznej marginesu定位元素 do górnej krawędzi bloku zawierającego.

Komentarz:Jeśli wartością atrybutu position jest "static", ustawienie atrybutu top nie ma żadnego efektu.

Opis

Dla elementów statycznych, wartość jest ustawiona na auto; dla wartości długości, odpowiednia wartość absolutna; dla wartości procentowych, wartość określona; w przeciwnym razie jest ustawiona na auto.

Dla elementów definiowanych względem, jeśli zarówno top jak i bottom są ustawione na auto, ich wartości obliczeniowe są 0; jeśli jedno z nich jest ustawione na auto, wartość drugiego jest ujemnym przeciwnikiem wartości tego pierwszego; jeśli oba nie są ustawione na auto, bottom bierze przeciwnik wartości top.

Zobacz również:

CSS kurs:CSS umieszczanie

Podręcznik HTML DOM:Atrybut top

Przykład

Ustaw górny margines obrazu 5 pikseli poniżej górnego marginesu zawierającego elementu:

img
  {
  position:absolute;
  top:5px;
  }

Spróbuj sam

Gramatyka CSS

top: auto|length|initial|inherit;

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Pozycja górna jest obliczana przez przeglądarkę.
% Ustawianie górnego położenia elementu w procentach od zawierającego go elementu. Można używać ujemnych wartości.
length Ustawianie górnego położenia elementu za pomocą jednostek takich jak px, cm itp. Można używać ujemnych wartości.
inherit Definiuje, że wartość top powinna być dziedziczona od elementu nadrzędnego.

Szczegóły techniczne

Domyślna wartość: auto
Inheredowanie: nie
Wersja: CSS2
Język JavaScript: object.style.top="50px"

Więcej przykładów

Ustawianie górnego marginesu obrazu za pomocą stałej wartości
Ten przykład pokazuje, jak ustawić górny margines obrazu za pomocą stałej wartości.
Ustawianie górnego marginesu obrazu za pomocą procentowej wartości
Ten przykład pokazuje, jak ustawić górny margines obrazu za pomocą procentowej wartości.

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0