CSS свойство bottom
Свойство CSS bottom задаёт положение элемента снизу относительно блока-контейнера. Примеры и интерактивные демонстрации.
Свойство CSS bottom задаёт вертикальное положение позиционированного элемента относительно его блока-контейнера. Оно работает только тогда, когда элемент имеет значение position, отличное от static, а положительное значение сдвигает нижний край элемента вверх, от нижней границы эталонного блока.
Примечание: свойство bottom не оказывает никакого эффекта на элементы со значением position: static (по умолчанию), поэтому ничего не произойдёт, пока вы не зададите position.
Как значение position влияет на эффект
Эталонный блок, от которого отсчитывается bottom, полностью определяется значением position элемента:
relative—bottomсмещает элемент относительно его нормального положения.bottom: 20pxперемещает его на 20 пикселей вверх от того места, где он обычно находится, не влияя на расположение окружающих элементов.absolute— элемент позиционируется относительно ближайшего позиционированного предка (предка, у которогоpositionне являетсяstatic). Значениеbottom: 0прикрепляет его к нижнему краю этого предка.fixed— элемент позиционируется относительно viewport и остаётся на месте при прокрутке страницы.sticky— элемент ведёт себя какrelativeдо тех пор, пока его контейнер прокрутки не достигнет порогового значения, после чего ведёт себя какfixed.
bottom и top
Если на одном элементе заданы и top, и bottom, при фиксированной высоте элемента побеждает top (для position: absolute/fixed), поскольку top разрешается первым. Если высота auto, одновременное задание top и bottom растягивает элемент, заполняя пространство между двумя отступами — удобный способ сделать абсолютно позиционированный блок таким же высоким, как его контейнер, не задавая явную высоту.
Процентные значения
Процентное значение bottom вычисляется от высоты блока-контейнера, а не самого элемента. Если у блока-контейнера нет явно заданной высоты, процентные отступы могут разрешаться в 0 или игнорироваться, поэтому при неизвестной высоте родителя предпочтительнее использовать единицы длины (px, em, rem).
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Положение bottom может быть анимировано. |
| Версия | CSS2 |
| DOM Синтаксис | object.style.bottom = "10px"; |
Синтаксис
Синтаксис свойства CSS bottom
bottom: auto | length | percentage | initial | inherit;Пример свойства bottom:
Пример CSS свойства bottom со значением position absolute
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 300px;
width: 80%;
border: 3px solid #8ebf42;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
The position of this div is set to relative.
<div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
</div>
</body>
</html>Результат
Пример свойства bottom со всеми значениями position:
Пример CSS свойства bottom со всеми значениями position
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 180px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 20px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 2px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 50px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
top: 0;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
This div element has position: relative.
<div class="absolute"><strong>position: absolute and bottom 20px</strong>
<br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
</div>
<br />
<div class="parent">
This div element has position: relative.
<div class="relative"><strong>position: relative and bottom 2px</strong>
<br />This div's bottom edge is placed 2 pixels above its normal position.</div>
</div>
<br />
<div class="fixed"><strong>position: fixed and bottom 50px</strong>
<br />This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
<div class="parent">
This div element has position: relative.
<div class="sticky"><strong>position: sticky and bottom 10px</strong>
<br />This div is sticky.</div>
</div>
</body>
</html>Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| auto | Значение по умолчанию. Браузер самостоятельно вычисляет положение нижнего края. | Попробуйте » |
| percentage | Определяет положение элемента в процентах от высоты блока-контейнера. | |
| length | Определяет положение элемента в px, cm и т.д. Допускаются отрицательные значения. | Попробуйте » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробуйте » |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
Отступ bottom — одно из четырёх свойств смещения блока, которые работают совместно со свойством position:
- top — задаёт вертикальный отступ от верхнего края эталонного блока.
- left — задаёт горизонтальный отступ от левого края.
- right — задаёт горизонтальный отступ от правого края.
Распространённый приём — прикрепление элемента к углу, например position: absolute; bottom: 0; right: 0; для закрепления значка в правом нижнем углу его контейнера.