css властивість top
Властивість top визначає відстань від верхнього краю батьківського елементу до верхнього краю дочірнього елемента.
Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, як батька виступає вікно браузера і положення елемента визначається від його верхнього краю. Якщо значення relative, top відраховується від верхнього краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від верхнього краю батька.
Коли вказані властивості top і bottom й висота невизначена, дорівнює auto або 100%, вгорі та знизу відстані дотримуються. В усіх інших ситуаціях, якщо висота обмежена, властивість top сильніше, і bottom ігнорується.
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості top може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.
- Нотатка
-
В IE до 7 версії, якщо вказані
автор: Svitlanatopіbottomодночасно,topмає перевагу в будь-якому випадку, отримує значення відbottom, а власне ігнорує. - Нотатка
-
Якщо
автор: Svitlanaposition:static, тоді властивістьtopне має ніякого ефекту. - Нотатка
-
Елемент буде позиціонуватися, якщо значення його властивості
автор: Svitlanapositionне дорівнюєstatic. - Нотатка
-
Якщо елемент з
автор: Svitlanaposition:absoluteне має батьків, він використовує в якості батька вікно браузера, і рухається разом з прокруткою сторінки.
Синтаксис
top: auto|length|initial|inherit|%;Властивість top може отримувати 5 значень:
-
auto -
Браузер самостійно розрахує велечину відступа. Без задання.
автор: Svitlana -
length -
В якості значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення можуть бути від'ємними.
Якщо значення у відсотках, положення елемента розраховується залежно від ширини батьківського елементу.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana -
% -
Встановлює відстань відступу в %. Від'ємні значення дозволяються.
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.top="100px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 6 | 12 | 5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Контейнер позиціонований, тож абсолютний блок відлічує top від його верхнього краю: рамка стоїть на 80 пікселів нижче.
HTML
<div class="area">
<div class="absolute">top: 80px</div>
</div>CSS
.area {
position: relative;
height: 220px;
background: #eee;
}
div.absolute {
position: absolute;
top: 80px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}Динамічний приклад
Приклад використання властивості
Позиціонування елементу відносно body за допомогою top.
Коментарі
Коментарів ще немає — будьте першим!