+ 3

[Solved] The code isn't working... The text is not coming at top left side with respect to the image... Plz help

<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> img { position:relative; left:20pt; } span { position:absolute; top:3px; left:0; } </style> </head> <body> <center> <img src="https://dl.dropbox.com/s/o35bpbzmo24jhe5/child-613199__480.jpg" height="200" width="90%" alt="" id="mainImg" style="filter: brightness(100%)" /> </center> <span>Hello World</span> </body> </html>

css html5 web absolute position relative

8th May 2021, 4:12 PM

Aayush-droid ★★★

3 Answers

+ 2

Aditya answer does not position text "at left top side with respect to the image" but at right top without respect to the image ^^ To do what you want to achieve, you must add a 'relative' positioned wrapper to your image (wich should be centered by avoiding depecated <center> element) fiting exactly the image, and add your <span> text 'absolute' positioned inside it: all css deeply commented in the provided code ;) https://code.sololearn.com/WPqJXFlR80jG/?ref=app

11th May 2021, 7:17 PM

visph