top

Оновлено: 06.01.2023

top

Для позиціонованого елемента визначає відстань від верхнього краю батьківського елемента до верхнього краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батька виступає вікно браузера, і положення елемента визначається від його верхнього краю (рис. 1). У разі значення relative, top відраховується від верхнього краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від верхнього краю батьківського (рис. 2).

Рис. 1. Значення top відносно вікна браузера
Рис. 2. Значення top щодо батьківського елементу

Коротка інформація

Значення за замовчуванням auto
Успадковується Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис

top: <розмір> | <відсотки> | auto

Значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) тощо. Значення властивості top може бути й від'ємним, у такому разі можливе накладання різних елементів один на одного. При заданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елемента.

auto Не змінює положення елемента.

Приклад

Результат цього прикладу показано на рис. 3.

Рис. 2. Застосування властивості top

Об'єктна модель

Об'єкт.style.top

Примітка

У браузері Internet Explorer до версії 7 для абсолютно позиціонованих елементів не можна одночасно задати властивості top, left, right, bottom.

Браузери

top

Переглянути сумісність з Can I use?

top