Стажировка на реальных проектах:
наполнение портфолио, помощь с работой и заказами, пробные собеседования. Жми для подробностей→
234 of 313 menu
Бесплатный курс по Верстке. От новичка до продвинутого верстальщика! Начало 11 ноября. Жми для записи!

Свойство bottom

Свойство bottom задает положение нижнего края элемента. Значения для свойства можно записать с общепринятыми единицами размеров, например, в пикселях, дюймах, пунктах, процентах. Задаваемые значения могут быть и отрицательными числами, в этом случае элементы будут накладываться один на другой. Отсчет координат определяется свойством position, которое обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

Синтаксис

селектор { bottom: число с единицей измерения или auto; }

Пример

Давайте при наведении на дочерний элемент установим ему позицию нижней границы равную 25px:

<div id="elem"> <p></p> </div> #elem { width: 400px; height: 300px; border: 1px solid black; } p { position: relative; width: 100px; height: 100px; border: 1px solid red; margin-top: 50px; } p:hover { bottom: 25px; width: 100px; height: 100px; border: 1px solid red; }

:

Пример

А теперь пусть при наведении нижняя граница дочернего элемента будет расположена на -50px:

<div id="elem"> <p></p> </div> #elem { width: 400px; height: 300px; border: 1px solid black; } p { position: relative; width: 100px; height: 100px; border: 1px solid red; margin-top: 50px; } p:hover { bottom: -50px; width: 100px; height: 100px; border: 1px solid red; }

:

Смотрите также

  • свойство top,
    которое задает позицию верхнего края элемента
  • свойство left,
    которое задает позицию левого края элемента
  • свойство right,
    которое задает позицию правого края элемента
  • псевдоэлемент ::backdrop,
    который задает расположение после первого элемента
  • свойство caption-side,
    которое задает позицию заголовка таблицы
uzlptdeswuzc