CSS свойство bottom

CSS свойство bottom устанавливает положение элемента совместно со свойством position.

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

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

Синтаксис

bottom: auto | length | initial | inherit;

Пример

<!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</h2>
    <div class="parent">
      Позиция данного div элемента установлена на relative.
      <div class="absolute">Нижний край данного div элемента расположена на расстоянии 10 px сверху от нижнего края, который содержит элемент, и позиция установлена на absolute. </div>
    </div>
    </div>
  </body>
</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;
      width: 50%;
      bottom: 10px;
      border: 3px solid #8AC007;
      } 
    </style>
  </head>
  <body>
    <h2>Пример свойства bottom</h2>
    <div class="parent">
      Данный div элемент имеет позицию relative.
      <div class="absolute"><strong>position: absolute and bottom 20px</strong><br>Нижний край этого div элемента расположена на расстоянии 20 px сверху от нижнего края, который содержит элемент.</div>
    </div>
    <br>
    <div class="parent">
      Данный div элемент имеет позицию relative.
      <div class="relative"><strong>position: relative and bottom 2px</strong><br>Нижний край этого div элемента расположена на расстоянии 2 px сверху от нормальной позиции.</div>
    </div>
    <br>
    <div class="fixed"><strong>position: fixed and bottom 50px</strong><br>Нижний край этого div элемента расположена на расстоянии 50 px снизу от окна просмотра.</div>
    <div class="parent">
      Данный div элемент имеет позицию relative.
      <div class="sticky"><strong>position: sticky and bottom 10px</strong><br>This div is sticky.</div>
    </div>
  </body>
</html>

Попробуйте сами!

Значения

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