top, right, bottom, left
Смещения позиционированного элемента от краёв области отсчёта: сверху, справа, снизу и слева.
Синтаксис
top: 0; right: 0; bottom: 0; left: 0;Значения
| Параметр | Тип | Описание |
|---|---|---|
| top | length | Расстояние от верхнего края. |
| right | length | Расстояние от правого края. |
| bottom | length | Расстояние от нижнего края. |
| left | length | Расстояние от левого края. |
Примеры
Метки в разных углах:
<style>
.box { position: relative; height: 120px; background: whitesmoke; }
.box span { position: absolute; background: teal; color: white; padding: 2px 6px; }
</style>
<div class="box">
<span style="top: 0; left: 0;">top left</span>
<span style="top: 0; right: 0;">top right</span>
<span style="bottom: 0; left: 50%;">bottom, from 50%</span>
</div>Примечания
Смещения работают только при position, отличном от static. Если задать и left, и right, элемент растянется между ними; inset: 0 задаёт все четыре стороны сразу.
См. также
- position — Как позиционируется элемент: в обычном потоке или по смещениям.
- margin-inline — Логические свойства: размеры и отступы по направлению текста вместо «слева», «справа», «сверху», «снизу».
- z-index — Какой из позиционированных элементов рисуется сверху, когда они перекрываются.
Вопросы и ответы по теме
В учебнике
- Позиционирование — Свойство position — static, relative, absolute, fixed и sticky, координаты top, right, bottom, left и inset.