нижняя граница

Эффект 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 игнорируется.

<length>

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

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

<percentage>

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

auto

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

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

inherit

Указывает, что значение такое же, как вычисленное значение от родительского элемента (который может не быть его содержащим блоком). Затем это вычисленное значение обрабатывается так, как будто это <length>, <percentage> или ключевое слово auto.

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 позиционирование макет модуль