CSS свойство bottom

Для HTML элементов с абсолютным позиционированием свойство bottom определяет расстояние от нижнего края элемента до нижнего края его ближайшего родительского элемента. Если у HTML элемента с абсолютным позиционированием нет позиционирующего родителя, то используется элемент body документа, и такой HTML элемент будет прокручиваться вместе со страницей.

Для HTML элементов с относительным позиционированием свойство bottom определяет расстояние от нижнего края элемента до его обычной позиции.

Внимание: Если свойство position имеет значение static, то свойство bottom не будет иметь эффекта.

CSS синтаксис

bottom: auto | расстояние | initial | inherit;

Возможные значения

ЗначениеОписание
autoЗначение по умолчанию. Браузер сам будет расчитывать позицию нижнего края элемента.
расстояниеУстанавливает расстояние от нижнего края элемента в px, cm и т.д. Допустимы отрицательные значения.
%Устанавливает расстояние от нижнего края элемента в процентах от высоты родительского элемента. Допустимы отрицательные значения.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем нижний край элемента <div> с абсолютным позиционированием на расстояние в 70px над нижним краем его ближайшего родителя.


div.absolute {
    position: absolute;
    bottom: 70px;
    width: 200px;
    height: 100px;
    border: 3px solid #8AC007;
}