html - 在图像上定位元素

Question

我在尝试定位 h3 时遇到了一些奇怪的问题在图像上标记 .featured-image (坐在图像的顶部)。当我尝试 position: absolute; ..如果<p>中的内容或多或少，h3将从其位置移动。如果我尝试 position: relative;与图像有很大差距，如果我尝试 margin <p>更近或更远，位置也会移动。如果我包装另一个 div h3周围用 position relative; 标记然后离开h3作为position: absolute; .它修复了它，但这似乎是一个 hack。

HTML:

 <section class="featured">
              <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; }

Answer 1

相对定位 .image-wrap，但没有任何左/右/上/下属性。然后，绝对定位 h3 并将其移动到您想要的位置。

你遇到的问题是绝对定位的元素必须包含在非静态定位的祖先元素中，否则它默认是相对于html元素定位的(这可能是它被下一段影响的原因) .相对定位元素仍然是页面流的一部分，因此相对定位元素原本占用的空间得以保留。那就是您看到的额外空间。

w3c 对 css 定位有一个很好的介绍:http://www.w3schools.com/css/css_positioning.asp ，就像这个页面一样:http://www.barelyfitz.com/screencast/html-training/css/positioning/