position element over image

I am having some weird problems trying to position the h3 tag over the image .featured-image(Sitting on top of the image). When I try position: absolute; .. If the content in <p> is more or less, the h3 will move from its position. If I try position: relative; theres a big gap from the image and if I tried to margin <p> closer or farther, the position also moves. If I wrap another div around the h3 tag with position relative; and then leave h3 as position: absolute;. It fixes it but that seems such a hack.

HTML:

 <section class="featured"&g开发者_Go百科t;
              <h1><img src="images/icon-featured.png" width="24px" height="23px" alt="Featured Site Icon"> Featured Site </h1>
              <div class="image-wrap">
                <a href="#">
                  <img class="featured-image" src="images/content-images/image.jpg" width="399px" height= "37px" alt="" />
                </a>
                <h3> Lorem Ipsum </h3>
              </div> <!-- image-wrap -->
              <p> 
                <a href="#">Lorem Ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
        </section><!-- .featured -->

CSS

article h1 img { margin: 0 5px 0 0; }
article .featured { }
article .featured h1 {  }
article .featured .image-wrap { margin: 27px 0 0 0; text-align: center; }
article .featured .image-wrap img { border: 1px solid #8e8d8e; -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 14px rgba(0, 0, 0, .4);
   -o-box-shadow: 0 0 14px rgba(0, 0, 0, .4); box-shadow: 0 0 14px rgba(0, 0, 0, .4); }

article .featured .image-wrap h3 { background: rgba(23, 23, 23, .5); bottom: 66px; font-size: 23px; padding: 10px; position: relative; left: 190px;
   text-align: right; width: 230px;  }

article .featured p { margin: 25px auto; padding: 10px; width: 380px; }

Position .image-wrap relatively, but without any left/right/top/bottom properties. Then, position the h3 absolutely and move it to where you want it.

The problem you're encountering is that absolutely positioned elements have to be contained in a non-statically positioned ancestor element, otherwise it defaults to positioning it relative to the html element (that's probably why it was affected by the following paragraph). Relatively positioned elements are still part of the page flow, so the space relatively positioned elements would originally have taken up is preserved. That's the extra space you're seeing.

The w3c has a nice intro to css positioning: http://www.w3schools.com/css/css_positioning.asp, as does this page: http://www.barelyfitz.com/screencast/html-training/css/positioning/