Встановлює положення нижнього краю вмісту елемента без урахування товщини рамок та відступів. Відлік координат залежить від якості position, вона зазвичай набуває значення relative (відносне положення) або absolute (абсолютне становище).
При відносному позиціонуванні елемента відлік ведеться від нижнього краю вихідного положення елемента, а при абсолютному — щодо нижнього краю вікна браузера (рис. 1). Якщо для батьківського елемента встановлено position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від нижнього краю батька (мал. 2).
Мал. 1. Значення bottom при абсолютному позиціонуванні елемента
Мал. 2. Значення bottom щодо батька
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Так |
Синтаксис
<code>bottom: <розмір> | <відсотки> | auto
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
В якості значень приймаються будь-які одиниці довжини, прийняті в CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути негативним, у цьому випадку можливі накладання різних елементів один на одного. При заданні значення у відсотках положення елемента обчислюється залежно від висоти батьківського елемента.
- auto
- Не змінює положення елемента.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bottom</title> <style> p { background: # e2edc1; padding: 10px; position: fixed; bottom: 10px; }
[data-title] {position: relative; }
[data-title]:hover::before { position: absolute; content: attr(data-title); bottom: 15px; background: rgba(0, 113, 181, 0.6); color: #fff; padding: 10px; width: 200px; }
</style>
</head>
<body> <p><span data-title="Інтеграл Гамільтона, очевидно ж">Інтеграл Гамільтона</span>, крім очевидного випадку, в принципі програмує інтеграл по орієнтованій області.</p>
</body>
</html>Результат цього прикладу показаний на рис. 3.
Рис. 3. Застосування властивості bottom
Об'єктна модель
Об'єкт.style.bottom
Примітка
У браузері Internet Explorer до версії 7 для абсолютно позиціонованих елементів не можна одночасно задати властивості top, left, right, bottom.
Специфікація
| Специфікація | Статус |
|---|---|
| Робочий проект | |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 5.5 | 7 | 12 | 1 | 5 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.