To start, your code is full of syntax errors. Don't use semi-colons (';') in your HTML. Semi-colons are used as delimiters in CSS. The rest of your code looks like it's been copied and pasted over and over and jumbled.
Generally, when I want to create this kind of caption/overlay, I create a containing element (usually a <div>) to hold the individual elements so I can control the positioning locally with reference to the containing element.
In the code above, I've set the <div> to position:relative so I can use absolute positioning on the internal elements to position them within the <div>, regardless where I insert that <div> in the page. I set the position of the <img> at the top/left of the <div> with a z-index of 1, and positioned the <p> to the bottom/left with a z-index of 2 so it's shown over the <img>.
That should get you started, but it would be a good idea to read some tutorial on absolute positioning. Good luck!