Позиционирование с top, right, bottom и left
Перемещать элементы позволяют четыре свойства: top, right, bottom и left.
Они действуют только на позиционированные элементы, то есть на элементы со значением position, равным relative, absolute, fixed или sticky.
Позиционирование текста поверх изображения
Оберните изображение контейнером с position relative, затем задайте каждой текстовой метке абсолютную позицию со смещениями, и текст окажется поверх изображения.
Пример
Метки размещены в четырёх углах изображения (слева сверху, справа сверху, слева снизу, справа снизу) и по его центру.
Prompt
HTML-страница, размещающая текст в разных местах поверх изображения с помощью top/right/bottom/left.
Во внутреннем блоке
<style> создайте контейнер с position relative, содержащий область изображения (используйте цветной блок вместо изображения). Добавьте абсолютно позиционированные белые текстовые метки слева сверху, справа сверху, слева снизу, справа снизу и по центру, каждая размещена с помощью смещений top/right/bottom/left.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 400px;
}
.imagebox {
width: 400px;
height: 250px;
background-color: #4CAF50;
}
.container .text {
position: absolute;
color: white;
font-weight: bold;
}
.topleft {
top: 8px;
left: 16px;
}
.topright {
top: 8px;
right: 16px;
}
.bottomleft {
bottom: 8px;
left: 16px;
}
.bottomright {
bottom: 8px;
right: 16px;
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="imagebox"></div>
<div class="text topleft">Top Left</div>
<div class="text topright">Top Right</div>
<div class="text bottomleft">Bottom Left</div>
<div class="text bottomright">Bottom Right</div>
<div class="text center">Centered</div>
</div>
</body>
</html>
Все CSS-свойства позиционирования
Свойства позиционирования вкратце:
bottom— размещает нижний край позиционированного блока.clip— обрезает часть абсолютно позиционированного элемента.left— размещает левый край позиционированного блока.position— выбирает способ позиционирования элемента.right— размещает правый край позиционированного блока.top— размещает верхний край позиционированного блока.