css властивість top


Властивість top визначає відстань від верхнього краю батьківського елементу до верхнього краю дочірнього елемента.

Властивість `top`

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

Коли вказані властивості top і bottom й висота невизначена, дорівнює auto або 100%, вгорі та знизу відстані дотримуються. В усіх інших ситуаціях, якщо висота обмежена, властивість top сильніше, і bottom ігнорується.

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

Нотатка:

В IE до 7 версії, якщо вказані top і bottom одночасно, top має перевагу в будь-якому випадку, отримує значення від bottom, а власне ігнорує.

Нотатка:

Якщо position:static, тоді властивість top не має ніякого ефекту.

Нотатка:

Елемент буде позиціонуватися, якщо значення його властивості position не дорівнює static.

Нотатка:

Якщо елемент з position:absolute не має батьків, він використовує в якості батька вікно браузера, і рухається разом з прокруткою сторінки.

Синтаксис

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;


}

Додаткові посилання