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.