Свойство bottom CSS участвует в определении вертикального положения позиционируемого элемента. Это не влияет на непозиционированные элементы.

Эффект bottom зависит от того, как элемент (т. е. значение свойства position расположен):

  • Когда position установлена ​​на absolute или fixed, свойство bottom определяет расстояние между нижним краем элемента и нижним краем его содержащего блока.
  • Если для position установлено значение relative, свойство bottom задает расстояние, на котором нижний край элемента перемещается над его нормальным положением.
  • Когда position задана как sticky, свойство bottom ведет себя как relative от внутренней области просмотра подобно его позиции fixed, когда он находится снаружи.
  • Когда position установлена ​​в static, свойство bottom не имеет никакого эффекта.

Когда указаны как top, так и bottom , а height не задано или auto или 100%, соблюдаются как top , так и bottom расстояния. Во всех других ситуациях, если height каким-либо образом ограничено, top свойство имеет приоритет, а свойство bottom игнорируется.

Синтаксис

/* <length> значения */
bottom: 3px;
bottom: 2.4em;

/* <percentage>s процент высоты содержащего блока */
bottom: 10%;

/* Значение ключевого слова */
bottom: auto;

/* Глобальные значения */
bottom: inherit;
bottom: initial;
bottom: unset;

Значения

<length>
Отрицательная, нулевая или положительная <length> величина, которая представляет: 
  • для абсолютно позиционированных элементов - расстояние до нижнего края содержащего их блока.
  • для относительно расположенных элементов - расстояние, на которое элемент перемещается выше его нормального положения.
<percentage>
Процент <percentage> высоты блока.
auto
Указывает, что:
  • для абсолютно позиционированных элементов позиция элемента основана на top свойстве height: auto  и рассматривается как высота, основанная на содержимом.
  • для относительно позиционированных элементов расстояние элемента от его нормального положения основано на свойстве top, или если  top  также  auto, элемент вообще не перемещается по вертикали. 
inherit
Указывает, что значение совпадает с вычисленным значением из его родительского элемента (который может не быть его содержащим блоком). Это вычисляемое значение обрабатывается так, как если бы это было <length>, <percentage> или ключевое слово  auto.

Формальный синтаксис

<length> | <percentage> | auto

Пример

Этот пример демонстрирует разницу в поведении свойства bottom, когда position является absolute и fixed.

HTML

<h2>Эксперимент</h2>
<p>Здесь<br>мы<br>набираем<br>побольше<br>высоты<br>для<br>вящей<br>наглядности<br>нашего<br>скромного,<br>но<br>очень<br>убедительного<br>эксперимента.<br>- Вот.</p>
<div class="fixed"><p>Я фиксирован</p></div>
<div class="absolute"><p>Я абсолютен</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55,55,55,.4);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Результат

Характеристики

Спецификация Статус Коммент
CSS Transitions
Определение 'bottom' в этой спецификации.
Рабочий черновик Определяет дно как анимацию.
CSS Positioned Layout Module Level 3
Определение 'bottom' в этой спецификации.
Рабочий черновик Добавляет поведение для липкого позиционирования.
CSS Level 2 (Revision 1)
Определение 'bottom' в этой спецификации.
Рекомендация Исходное определение.

Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Процентыотносятся к высоте содержащего блока
Отображениевизуальный
Обработка значенияесли указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае auto
Animation typeдлина, проценты или calc();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Совместимость с браузером

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка11215161
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да Да Да4 Да Да Да

1. In Internet Explorer versions before 7, when both top and bottom are specified, the element position is overconstrained and the top property has precedence; the computed value of bottom is set to -top, while its specified value is ignored.

Смотрите также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: warsan
Обновлялась последний раз: warsan,