bottom

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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 — проигнорировано.

Синтаксис

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

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

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

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

Значения

<length>

Отрицательная, нулевая или положительная величина, которая представляет:

  • для абсолютно позиционируемых элементов &mdash расстояние до нижнего края содержащего их блока;
  • для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.
<percentage>

Процент от высоты родительского блока.

auto

Ключевое слово, которое указывает, что:

  • для абсолютно спозиционированных элементов — позиция элемента опирается на свойство top, пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto, то элемент располагается так же, как при статическом позиционировании.
  • для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве top; если значение top также auto, элемент вообще не перемещается по вертикали.
inherit

Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как <length>, <percentage> или ключевое слово auto.

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

bottom = 
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

Пример

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

HTML

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

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

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

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

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

Результат

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

Specification
CSS Positioned Layout Module Level 3
# insets

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bottom
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

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