html - 将文字放在图片上方

我一直在寻找stackoverflow上的几个线程，但似乎无法使其工作。我发现我需要在父div上应用相对位置，然后在子文本上应用绝对位置，但这不起作用？我做错了什么`

.the-image {
   position: relative;
   border: 1px solid;
    width: auto;

}

.the-h3 {
    z-index:100;
    position:absolute;
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

.the-h3 span {
   color: #ffffff;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
}

<div class="the-image">
    <img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
    <h3 class="the-h3"><span>TEST</span></h3>
</div>

最佳答案

您为h3提供了一个top属性，该属性大于图像的高度。

只需将该值降低为更合适的值即可：

.the-image {
   position: relative;
   border: 1px solid;
    width: auto;

}

.the-h3 {
    z-index:100;
    position:absolute;
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:10px;
}

.the-h3 span {
   color: #ffffff;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
}

<div class="the-image">
    <img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
    <h3 class="the-h3"><span>TEST</span></h3>
</div>

关于html - 将文字放在图片上方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27625811/