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;


}

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