bottom

Пример

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

div.absolute {
position: absolute;
bottom: 10px;
width: 50%;
border: 3px solid #8AC007;
}

Определение bottom

CSS свойство bottom влияет на вертикальное положение позиционированного элемента. Это свойство не влияет на непозиционированные элементы.

Если position: absolute; или position: fixed; - CSS свойство bottom устанавливает нижний край элемента на единицу выше/ниже нижнего края его ближайшего расположенного предка.
Если position: relative; - CSS свойство bottom заставляет нижний край элемента перемещаться выше/ниже его нормального положения.
Если position: sticky; - CSS свойство bottom ведет себя так, как будто его положение является относительным, когда элемент находится внутри области просмотра, и как будто его положение фиксировано, когда он находится снаружи.
Если position: static; - CSS свойство bottom не имеет никакого эффекта.

Значение по умолчанию:	auto
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS2
JavaScript синтаксис:	object.style.bottom="10px" Попробуй

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
bottom	1.0	5.0	1.0	1.0	6.0

bottom: auto|length|initial|inherit;

Значение	Описание	Демонстрация
auto	Позволяет браузеру вычислить положение нижнего края. Это значение по умолчанию	Демо ❯
length	Задает положение нижнего края в пикселях, см и т.д. Допускаются отрицательные значения. Читайте о единицы измерения длины	Демо ❯
%	Задает положение нижнего края в % от содержащего элемента. Допускаются отрицательные значения	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

CSS Справочник: top свойство

CSS Справочник: left свойство

CSS Справочник: right свойство

HTML DOM справочник: bottom свойство