| Інтернет Експлорер | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Наслідується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Для позиціонованого елемента визначає відстань від верхнього краю батьківського елемента до верхнього краю дочірнього елемента. Підрахунок координат залежить від значення властивості position. Якщо вона дорівнює absolute, як батьківський елемент виступає вікно браузера, а положення елемента визначається від його верхнього краю (рис. 1). У випадку значення relative, top розраховується від верхнього краю початкового положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їх положення від верхнього краю батька (рис. 2).
Синтаксис
top: значення | відсотки | auto | успадковується
Значення
В якості значень приймаються будь-які одиниці довжини, прийняті в CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та інші. Значення властивості top може бути й від'ємним, у цьому випадку можливі накладання різних елементів один на одного. При вказанні значення в відсотках, положення елемента обчислюється в залежності від висоти батьківського елемента.
- auto
- Не змінює положення елемента.
- успадковується
- Успадковує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top</title>
<style>
.menu {
position: absolute; /* Абсолютне позиціонування */
left: 300px; /* Положення від лівого краю */
top: 50px; /* Положення від верхнього краю */
width: 120px; /* Ширина блоку */
background: #e0e0e0; /* Колір фону */
border: 1px solid #000; /* Параметри рамки */
padding: 5px; /* Відступи навколо тексту */
}
.content {
position: absolute; /* Абсолютне позиціонування */
left: 0; /* Положення від лівого краю */
top: 0; /* Положення від верхнього краю */
width: 280px; /* Ширина блоку */
background: #00a5b6; /* Колір фону */
color: white; /* Колір тексту */
padding: 5px; /* Відступи навколо тексту */
padding-right: 60px; /* Відступ справа */
text-align: justify; /* Вирівнювання по ширині */
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis te feugifacilisi.
</div>
<div class="menu">
Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en
commodo consequat.
</div>
</body>
</html>Результат даного прикладу показаний на рис. 3.
Об'єктна модель
[window.]document.getElementById("elementID").style.top
Браузери
У браузері Internet Explorer 6 для абсолютно позиціонованих елементів неможливо одночасно задати властивості top, left, right, bottom.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.