html - 将文本置于图像之上

Question

我一直在查看 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>

Answer 1

您正在为 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>