bottom

CSS свойство bottom частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. bottom не применится, если задано position: static).

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

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

Когда заданы оба свойства top и bottom, а свойство height не задано, auto или равно 100%, то оба свойства top и bottom учитываются. Если свойство height задано, то свойство top будет учтено, а bottom — проигнорировано.

Синтаксис

/* Значения величин */
bottom: 3px;
bottom: 2.4em;

/* Процентные значения от высоты родительского блока */
bottom: 10%;

/* Ключевое слово */
bottom: auto;

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

Значения

<length>
Отрицательная, нулевая или положительная величина, которая представляет:
  • для абсолютно позиционируемых элементов &mdash расстояние до нижнего края содержащего их блока;
  • для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.
<percentage>
Процент от высоты родительского блока.
auto
Ключевое слово, которое указывает, что:
  • для абсолютно спозиционированных элементов — позиция элемента опирается на свойство top, пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: 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 для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
bottomChrome Полная поддержка 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 Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да

Легенда

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

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