Свойство CSS bottom

Свойство CSS bottom задаёт нижнюю позицию элемента в сочетании со свойством position.

Примечание: свойство bottom не влияет на элементы с position: static (по умолчанию).

В зависимости от способа позиционирования элемента, эффект от свойства bottom может различаться. В частности:

Когда позиционирование элемента установлено в relative, absolute, fixed или sticky, значение bottom играет важную роль.
При значении fixed элемент позиционируется относительно области просмотра экрана и остаётся фиксированным при прокрутке.
При значении absolute элемент позиционируется относительно своего контейнера.
При значении relative нижний край элемента смещается вверх или вниз относительно своей нормальной позиции.
Для sticky элемент ведёт себя как relative, пока не будет достигнут порог прокрутки, после чего он ведёт себя как fixed относительно области просмотра.

Начальное значение	auto
Применяется к	Ко всем элементам. Также применяется к ::first-letter.
Наследуется	Нет.
Анимация	Да. Позиция bottom может анимироваться.
Версия	CSS2
Синтаксис DOM	object.style.bottom = "10px";

Синтаксис

Синтаксис свойства CSS bottom

css

bottom: auto | length | percentage | initial | inherit;

Пример свойства bottom:

Пример свойства CSS bottom со значением position: absolute

html

<!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>

Try it Yourself »

Результат

CSS bottom property

Пример свойства bottom со всеми значениями position:

Пример свойства CSS bottom со всеми значениями position

html

<!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>

Try it Yourself »

Значения

Значение	Описание	Запустить
auto	Значение по умолчанию. Позволяет браузеру вычислить позицию нижнего края.	Запустить »
percentage	Задаёт позицию элемента в процентах от высоты блока-контейнера.
length	Задаёт позицию элемента в px, cm и т. д. Допускаются отрицательные значения.	Запустить »
initial	Устанавливает свойству значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'bottom' в CSS?

Позиционирует элемент относительно нижнего края его контейнера.Обеспечивает жильё для бездомных.Может принимать значение auto.Управляет цветом границы элемента.Должно использоваться вместе со свойством position для корректной работы.Автоматически изменяет размер изображений на веб-странице.

Свойство CSS bottom ​

Синтаксис ​

Пример свойства bottom: ​

Результат ​

Пример свойства bottom со всеми значениями position: ​

Значения ​