Запись на курсы по HTML, CSS, JavaScript, PHP, Python, фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→
234 of 313 menu
Бесплатный тренинг по PHP: форматирование строк. Начало 25 сентября. Жми для записи!

Свойство 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,
    которое задает позицию заголовка таблицы
byenru