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