We encounter many situations in our day to day life where we want to write text over an image at the desired position. In this article, you are going to learn how to write text over an image using the positioning of the elements. Before going to the concept first we need to know about the position of the elements positioning generally means where you want your elements to appear on your website.
There are various options in positioning like static, relative, absolute, sticky etc. So here we will use the position property to place the text in an image.
Syntax:
position: static|absolute|fixed|relative|sticky|initial|inherit;
In this article you will learn about relative and absolute which are required to write text over an image
- Relative positioning: This method is used to give the element position which is relative to the normal position.
- Absolute positioning: In this method the elements are positioned with respect to their positioned ancestor (positioned implies the position of the ancestor is other than static) *as static is the default positioning.
Original Image:
Example:
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: green;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src=
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
</body>
</html>
|
Output:
Article Tags :
Recommended Articles