View Full Version : Text on top of Image on top of image

11-24-2011, 06:52 PM
I want to position text on top of an image(the second image in the code below). How do I do that, preferably in the div if it's possible?

<div style="position: relative; left: 0px; top: 0px; width: 1020px; height: 1350px;">
<a href="http://www.google.com" target="_blank">
<img src="http://blah.gif" style="position: absolute; top: 7px; left: 9px;"/>
<img src="http://blah.jpg" style="position: absolute; top: 79px; left: px;"/>


11-24-2011, 07:08 PM
try changing top: 79px; left: px; to top: 0; left: 0; from the 2nd image

11-24-2011, 08:14 PM
well, no, thanks but, the images are just find and dandie. I need to position text at a specific point on top of the second image in that code. I dont want it to be on the side, I need it specifically on top. and i need to control exactly where it is.

11-24-2011, 08:50 PM
by setting something to position: absolute; you are taking it out of the flow of the page, therefore it is on top of everything. Try posting a live link or your entire code, so we can better understand the problem!

11-24-2011, 09:11 PM
Okay, how 'bout this - I want text on top of an image, at a specific spot(lets say... top-right corner) of that image. However, I also want that image at a specific spot(lets say... top-right corner) of an image, or just a div, table etc. property(height, width) behind it. Is that possible, and if so, how? I appreciate the help.

It's to my, somewhat ignorant understanding, that if what I'm specifically trying to do is all in a div set to center, the flow should stay intact, even regardless of screen resolution, seeing as everything's set relative to that div(that's centered).

Pardon me if I sound like a dick, or just too ignorant to deal with. I humbly ask for your assistance.

11-24-2011, 09:46 PM
plug this into a new html document. see if it's what your looking for! When you set the parent to position: relative;, whatever within it that's set to position: absolute; will be RELATIVE to it. So if you have a box that is set to position: relative, and you absolute something in that box, it will be relative to the dimensions of that box

<!DOCTYPE html>
<div class="layers" style="position: relative; width: 400px; height: 400px;">
<img width="400px" height="400px" src="http://4.bp.blogspot.com/-69vBzuJzkoQ/TWY80WzNdxI/AAAAAAAADRk/RmTE3cj9lOA/s1600/The-best-top-desktop-grey-wallpapers-hd-grey-wallpaper-31.jpg"/>
<span style="position: absolute; top: 0; right: 0;">text</span>

An even better way would be to use a background-image: instead!

11-24-2011, 10:58 PM
Thanks, I figured it out. Happy Thanksgiving

11-25-2011, 09:30 AM
Same here i am also searching for the same solution. Anybody can add little bit more.

11-25-2011, 09:50 AM
I can get the result like shows as below