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

Интерактивный пример

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 20px;

<section>  <div>    <div>I am absolutely positioned.</div>    <p>      As much mud in the streets as if the waters had but newly retired from the      face of the earth, and it would not be wonderful to meet a Megalosaurus,      forty feet long or so, waddling like an elephantine lizard up Holborn      Hill.    </p>  </div></section>

.example-container {  border: 0.75em solid;  padding: 0.75em;  text-align: left;  position: relative;  width: 100%;  min-height: 200px;}#example-element {  background-color: #264653;  border: 4px solid #ffb500;  color: white;  position: absolute;  width: 140px;  height: 60px;}

Эффект свойства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: 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

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

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;}

Результат

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

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

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

• position,top,left,right