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
.
Формальный синтаксис
bottom =
auto | (en-US)
<length-percentage>
<length-percentage> =
<length> | (en-US)
<percentage>
Пример
Этот пример демонстрирует разницу в поведении свойства 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(); |
Совместимость с браузером
BCD tables only load in the browser