css властивість bottom
CSS властивість bottom вказує зміщення позиціонованого елемента щодо нижнього краю.
Вона не впливає на елементи, у яких для position зазначено static або не зазначено жодного значення. Як саме властивість bottom буде зміщувати елемент, залежить від конкретного значення властивості position:
- Елемент з фіксованим позиціонуванням (
position: fixed;) зміщується вниз відносно нижнього краю вікна браузера. - Елемент з абсолютним позиціонуванням (
position: absolute;) зміщується вниз відносно нижнього краю його першого позиціонованого (неstatic) батьківського елемента. Якщо у елемента немає батька з позиціонуванням (relative, absoluteабоfixed), тоді він буде зміщуватися відносно нижнього краю вікна браузера. - Елемент з відносним позиціонуванням (
position: relative;) зміщується вниз відносно нижнього краю його поточної позиції. - Для елемента зі статичним позиціонуванням (
position: static;) застосування властивостіbottomне дасть ніякого ефекту.
Коли вказані властивості top і bottom й висота невизначена, дорівнює auto або 100%, вгорі та знизу відстані дотримуються. В усіх інших ситуаціях, якщо висота обмежена, властивість top сильніше, і bottom ігнорується.
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.
| Нотатка: | В IE до 7 версії, якщо вказані |
Синтаксис
bottom: auto|%|length|initial|inherit;Властивість bottom може отримувати 5 значень:
autoНе змінює положення елемента
lengthБудь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (
px), дюйми (in), пункти (pt) та ін. Значення властивостіbottomможе бути і негативним, в цьому випадку можливі накладення різних елементів один на одного%Положення елемента обчислюється залежно від висоти батьківського елементу
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | ject.style.bottom="10px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| bottom | 1.0 |
5.0 |
1.0 |
1.0 |
6.0 |
| Переглядач | |||
|---|---|---|---|
| bottom | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Приклад використання властивості
Позиціонування блоку відносно body.
Встановлення нижнього краю абсолютно позиціонованого елемента <div> на 70 пікселів вище
div.absolute {
position: absolute;
bottom: 70px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}