無法將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>