bottom¶
Свойство bottom
устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов.
Отсчёт координат зависит от свойства position
, оно обычно принимает значение relative
(относительное положение) или absolute
(абсолютное положение).
При относительном позиционировании элемента, отсчёт ведётся от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position: relative
, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).
Синтаксис¶
/* <length> values */
bottom: 3px;
bottom: 2.4em;
/* <percentage>s of the height of the containing block */
bottom: 10%;
/* Keyword value */
bottom: auto;
/* Global values */
bottom: inherit;
bottom: initial;
bottom: unset;
Значения¶
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства bottom
может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
auto
- Не изменяет положение элемента.
Значение по-умолчанию:
bottom: auto;
Применяется ко всем элементам
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bottom</title>
<style>
p {
background: #e2edc1;
padding: 10px;
position: fixed;
bottom: 10px;
}
[data-title] {
position: relative;
}
[data-title]:hover::before {
position: absolute;
content: attr(data-title);
bottom: 15px;
background: rgba(0, 113, 181, 0.6);
color: #fff;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<p>
<span data-title="Интеграл Гамильтона, очевидно же"
>Интеграл Гамильтона</span
>, исключая очевидный случай, в принципе программирует
интеграл по ориентированной области.
</p>
</body>
</html>