Свойство 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();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 5
Замечания
Полная поддержка 5
Замечания
Замечания 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.
Opera Полная поддержка 6Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

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

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

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