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.
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.
- How to place the image above the slider in mobile view in bootstrap?
- How to give text or an image transparent background using CSS?
- Image Replacement in Bootstrap using text-hide Class
- Convert an image into grayscale image using HTML/CSS
- How to place button in top Right corner using bootstrap?
- CSS | Text Effects
- How to replace text with CSS?
- CSS | Text Formatting
- jQuery | :text Selector
- jQuery | text() Method
- CSS text-transform Property
- CSS | text-shadow Property
- CSS | text-decoration Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.