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.