Positioning with top, right, bottom, and left
Four properties move elements around: top, right, bottom and left.
They have an effect only on positioned elements, which means a position of relative, absolute, fixed or sticky.
Positioning Text On an Image
Wrap an image in a relative container, then give each text label an absolute position with offsets, and the text sits on top of the image.
Example
The labels sit at the four corners of the image (top-left, top-right, bottom-left, bottom-right) and at its center.
Prompt
An HTML page that positions text at different spots over an image using top/right/bottom/left.
In an internal
<style> block, make a relative container holding an image area (use a colored box as a stand-in image). Add absolutely-positioned white text labels at the top-left, top-right, bottom-left, bottom-right, and center, each placed with top/right/bottom/left offsets.
Output: complete HTML page
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>
All CSS Positioning Properties
The positioning properties in brief:
bottom— places the bottom edge of a positioned box.clip— cuts off part of an absolutely positioned element.left— places the left edge of a positioned box.position— chooses how an element is positioned.right— places the right edge of a positioned box.top— places the top edge of a positioned box.