Captions on an image with CSS - html

Question

I'm trying to make "meme"-looking captioned images with CSS using an <img> object and two <p> objects styled with CSS. Right now I have a <div> which contains the <img> and then the two <p>'s. What I want to do is have the picture positioned in the top-left corner of the div and then I set the z-index to -1 and THEN somehow position the two p objects over the image but positioned relative to the top-left corner of the div.
This is so I can set the top: y and left: x values of the p objects such that they will be positioned accordingly relative to the top-left of the div and in turn the image.
But when I try to set position: relative for the p objects there's a problem where the first p is correctly placed but the 2nd p is positioned relative to the first one so even though it's at top: 0, left: 0 it's still lower than it should be.
How can I fix this?

Answer 1

check out this jsfiddle:
http://jsfiddle.net/56J8y/1/
relevant CSS
.meme_container {
position: relative;
}
.meme_container .top_meme {
position:absolute;
top:0;
left:0;
}
.meme_container .bottom_meme {
position:absolute;
bottom:0;
left:0;
}
​
and the html
<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>​

Answer 2

One way is to use Pseudo element like :after and :before
Example:
img:after {
content: "Hello, I am the caption";
}

Answer 3

I think you are talking about this situation:
<div>
<img />
<p class="first">caption1</p>
<p class="second">caption2</p>
</div>
Then to do what you want you need to set the positioning of the div to something (relative will generaly not affect your behaviour so its a good choise). Once that is done postioning absolute can be used inside. Absolute refers to the next higher positioned element!!
div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};