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