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;


}

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