css властивість top
Властивість top визначає відстань від верхнього краю батьківського елементу до верхнього краю дочірнього елемента.
Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, як батька виступає вікно браузера і положення елемента визначається від його верхнього краю. Якщо значення relative, top відраховується від верхнього краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від верхнього краю батька.
Коли вказані властивості top і bottom й висота невизначена, дорівнює auto або 100%, вгорі та знизу відстані дотримуються. В усіх інших ситуаціях, якщо висота обмежена, властивість top сильніше, і bottom ігнорується.
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості top може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.
| Нотатка: | В IE до 7 версії, якщо вказані |
| Нотатка: | Якщо |
| Нотатка: | Елемент буде позиціонуватися, якщо значення його властивості |
| Нотатка: | Якщо елемент з |
Синтаксис
top: auto|length|initial|inherit|%;Властивість top може отримувати 5 значень:
autoБраузер самостійно розрахує велечину відступа. Без задання.
lengthВ якості значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення можуть бути від'ємними.
Якщо значення у відсотках, положення елемента розраховується залежно від ширини батьківського елементу.
initialВстановлює цю властивість в значення без задання
inheritУспадкує значення властивості від свого батьківського елемента
%Встановлює відстань відступу в %. Від'ємні значення дозволяються.
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.top="100px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| top | 1.0 |
5.0 |
1.0 |
1.0 |
6.0 |
| Переглядач | |||
|---|---|---|---|
| top | 1.0 |
1.0 |
1.0 |
Приклади
Динамічний приклад
Приклад використання властивості
Позиціонування елементу відносно body за допомогою top.
Елемент <div> буде на 80px нижче.
div.absolute {
position: absolute;
top: 80px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}