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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

bottom: auto|%|length|initial|inherit;

Властивість bottom може отримувати 5 значень:

auto

Не змінює положення елемента

автор: Svitlana

правити

length

Будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного

автор: Svitlana

правити

%

Положення елемента обчислюється залежно від висоти батьківського елементу

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	6	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="area">
    <div class="absolute">bottom: 70px</div>
</div>

.area {
    position: relative;
    height: 220px;
    background: #eee;
}

div.absolute {
    position: absolute;
    bottom: 70px;
    width: 200px;
    height: 100px;
    border: 3px solid #8AC007;
}