top
Odsuwa pozycjonowany element od górnej krawędzi jego punktu odniesienia.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy pozycjonowane (position inne niż static)
- JavaScript
element.style.top = "24px"
Przykład
#.badge {
position: absolute;
top: 8px;
}<div class="stage" style="position: relative; height: 110px;">
<span class="badge box">Nowe</span>
</div>Definicja i zastosowanie
#Właściwość top działa tylko na elementach, które mają position inne niż static. Mówi, jak daleko od górnej krawędzi punktu odniesienia ma stanąć element.
Punkt odniesienia zależy od rodzaju pozycjonowania. Przy relative element przesuwa się względem miejsca, które zająłby normalnie. Przy absolute liczy się najbliższy przodek z pozycjonowaniem, przy fixed okno przeglądarki, a przy sticky krawędź przewijanego kontenera.
Wartości procentowe liczą się od wymiaru punktu odniesienia. Jeśli ustawisz jednocześnie top i bottom przy elemencie bez sztywnego rozmiaru, rozciągnie się on między obiema krawędziami.
Składnia
#top: auto | <długość> | <procent>;Wartości
#Wartości w praktyce
#auto
.demo { top: auto; }24px
.demo { top: 24px; }50%
.demo { top: 50%; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli przesunięcie „nie działa”, sprawdź, czy element ma ustawione
position. - Do ustawienia wszystkich czterech stron naraz użyj skrótu
inset.
Powiązane hasła
#- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
- insetSkrót, który ustawia top, right, bottom i left w jednej deklaracji.
- z-indexUstala, który element leży wyżej, gdy elementy na siebie nachodzą.
- bottomOdsuwa pozycjonowany element od dolnej krawędzi jego punktu odniesienia.
Widzisz błąd albo brakuje przykładu? Napisz do nas.