Positioning with top, right, bottom, and left
The top, right, bottom, and left properties are used to position elements.
These properties only work on positioned elements (elements with position set to relative, absolute, fixed, or sticky).
Positioning Text On an Image
How to position text on an image:
Example
<div style="position:relative;text-align:center;">
<img alt="Cinque Terre" src="img_5terre_wide.jpg" style="width:100%;height:auto;opacity:0.5"/>
<div style="position:absolute;bottom:8px;left:16px;font-size:20px">Bottom Left</div>
<div style="position:absolute;top:8px;left:16px;font-size:20px">Top Left</div>
<div style="position:absolute;top:8px;right:16px;font-size:20px">Top Right</div>
<div style="position:absolute;bottom:8px;right:16px;font-size:20px">Bottom Right</div>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:20px">Centered</div>
</div>
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |