css.in.ua
Підтримати

css властивість bottom

CSS властивість bottom вказує зміщення позиціонованого елемента щодо нижнього краю.

Властивість `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 версії, якщо вказані top і bottom одночасно, top має перевагу в будь-якому випадку, отримує значення від bottom, а власне ігнорує.

Синтакс

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;


}

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

Зв'язок