无法将HTML文本显示在右侧图像上

Question

奇怪的是。我试图获得一行HTML文本，在这种情况下，一个电子商务网站的主页上写着SHOP BAGS，问题是它出现在错误的图像上。我将图像包裹起来，我希望文本出现在它自己的div中，重新做了CSS，但它仍然不能正常工作。试图弄清楚为什么，我不想改变绝对的位置，我真的不需要。那么有人可以窥视并提供修复建议吗？

http://originalchuck.com/

Answer 1

的绝对定位的元素要相对下一个定位元素的top。通过使父级位置相对，将绝对位置边界减少到父级元素的范围。

.thumbnail a { 
    position: relative; 
    display: block;  
} 

我会申请类似上面，因为.text-content位于a标签内

.thumbnail a { 
 
    position: relative; 
 
    display: block;  
 
} 
 

 
span.text-content { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 15px; 
 
    color: #fff; 
 
    font-size: 24px;  
 
}

<div class="thumbnail"> 
 
    <a href=""> 
 
     <img src="http://placehold.it/580x278/333333/" alt="" /> 
 
     <span class="text-content"><span>Shop Buckets</span></span> 
 
    </a> 
 
</div> 
 

 
<div class="thumbnail"> 
 
    <a href=""> 
 
     <img src="http://placehold.it/580x278/333333/" alt="" /> 
 
     <span class="text-content"><span>Shop Bags</span></span> 
 
    </a> 
 
</div>