Html 将元素放置在图像上

我在尝试将

h3

标记放置在图像

上时遇到了一些奇怪的问题。当我尝试
位置时：绝对。。如果
中的内容或多或少，则
h3
将从其位置移动。如果我尝试
位置：相对
与图像之间有很大的差距，如果我尝试将
边距
拉近或拉远，位置也会移动。如果我用
相对位置将另一个
div
环绕
h3
标记
然后将
h3
保留为
位置：绝对。它修复了它，但这似乎是一个黑客

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 -->

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

您遇到的问题是绝对定位的元素必须包含在非静态定位的祖先元素中，否则它默认相对于html元素定位（这可能就是为什么它会受到以下段落的影响）。相对定位的元素仍然是页面流的一部分，因此相对定位的元素最初占用的空间将被保留。这就是你看到的额外空间

w3c对css定位有一个很好的介绍：，这一页也是：
。绝对定位的元素相对于其最近的祖先进行定位，该祖先具有非静态位置，可能是
或其他位置。我是否可以使用section和remove.image wrap执行此操作？我这样做只是为了包装h3和图像。@Trippy:你可以，但你必须以某种方式说明
的大小。您的
为您定位
提供了一个方便的左上角。您可以尝试将
放在
内，然后将
位置：相对
放在
上。分离标记和表示是一个很好的目标，但并不总是有效。@mu太短了-绝对正确。我把父母和祖先完全混为一谈了P我在回答中更正了它。
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; }