CSS Bottom - Базовые принципы и особенности работы с атрибутом bottom

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

Пример использования свойства bottom:

HTML:

html

  
Пример

CSS:

css
.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
.child {
  position: absolute;
  bottom: 20px;
  width: 100px;
  height: 50px;
  background-color: yellow;
}

В данном примере, свойство bottom задано для дочернего элемента с классом "child" и установлено значение 20px. Это означает, что нижний край дочернего элемента будет находиться на 20 пикселей от нижней границы родительского элемента.

В результате, дочерний элемент будет расположен снизу родительского элемента на 20 пикселей. В данном случае, родительский элемент имеет размеры 200x200 пикселей, а дочерний элемент имеет размеры 100x50 пикселей. Таким образом, дочерний элемент будет иметь следующие координаты: X=0, Y=130 (200 - 50 - 20).

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