Свойство CSS `bottom`

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

Попробуйте

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Синтаксис

/* <length> values */
bottom: 3px;
bottom: 2.4em;
bottom: calc(anchor(--my-anchor 50%) + 5px);
bottom: anchor-size(width);

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

Значения

<length>

Отрицательное, нулевое или положительное значение <length>:

• для абсолютно позиционируемых элементов оно задаёт расстояние до нижнего края содержащего блока;
• для относительно позиционируемых элементов оно задаёт расстояние, на которое элемент перемещается вверх от своего обычного положения;
• для элементов с позиционированием относительно якоря функция anchor() возвращает значение <length> относительно положения верхнего или нижнего края связанного элемента-якоря (см. раздел Использование свойств отступа со значениями функции anchor()), а функция anchor-size() возвращает значение <length> относительно ширины или высоты связанного элемента-якоря (см. раздел Задание положения элемента на основе размера якоря).

<percentage>

Значение <percentage> от высоты содержащего блока.

auto

Указывает, что:

• для абсолютно позиционируемых элементов положение элемента определяется свойством top, а height: auto считается высотой, зависящей от содержимого; либо, если top также имеет значение auto, элемент располагается там, где он находился бы по вертикали, если бы был статическим элементом;
• для относительно позиционируемых элементов расстояние элемента от его обычного положения определяется свойством top; либо, если top также имеет значение auto, элемент вообще не перемещается по вертикали.

Описание

Эффект bottom зависит от способа позиционирования элемента (то есть от значения свойства position):

• Если для position задано значение absolute или fixed, свойство bottom задаёт расстояние между внешним краем нижнего поля элемента и внешним краем нижнего внутреннего отступа содержащего блока, либо, в случае элементов с позиционированием относительно якоря, при использовании функции anchor() в значении — расстояние относительно положения указанного края <anchor-side>. Свойство bottom совместимо со значениями top, bottom, start, end, self-start, self-end, center и <percentage>.
• Если для position задано значение relative, свойство bottom задаёт расстояние, на которое нижний край элемента перемещается вверх от своего обычного положения.
• Если для position задано значение sticky, свойство bottom используется для вычисления прямоугольника ограничения прилипания.
• Если для position задано значение static, свойство bottom не действует.

Если заданы и top, и bottom, для position установлено значение absolute или fixed, а height не задано (имеет значение auto или 100%), учитываются оба расстояния: top и bottom. Во всех остальных случаях, если height ограничено каким-либо образом или для position задано значение relative, приоритет имеет свойство top, а свойство bottom игнорируется.

Формальное определение

Формальный синтаксис

bottom = 
  auto |
  <length-percentage> |
  <anchor()> |
  <anchor-size()>

<length-percentage> = 
  <length> |
  <percentage>

<anchor()> = 
  anchor( <anchor-name>? &&
  <anchor-side>, <length-percentage>? )

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> = 
  <dashed-ident>

<anchor-side> = 
  inside |
  outside |
  top |
  left |
  right |
  bottom |
  start |
  end |
  self-start |
  self-end |
  <percentage> |
  center

<anchor-size> = 
  width |
  height |
  block |
  inline |
  self-block |
  self-inline

Примеры

Абсолютное и фиксированное позиционирование

В этом примере показана разница в поведении свойства bottom при значениях свойства position absolute и fixed.

HTML

<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgb(55 55 55 / 20%);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• top, left и right
• Краткое свойство inset
• inset-block-start, inset-block-end, inset-inline-start и inset-inline-end
• Краткие свойства inset-block и inset-inline
• position
• Модуль CSS для позиционируемой раскладки