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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 6.0+

Практикуйте свои знания

Что такое свойство CSS 'bottom'?
Считаете ли это полезным?