无法让 HTML 文本出现在正确的图像上答案

【问题标题】：Cant get HTML text to appear over the right image无法让 HTML 文本出现在正确的图像上
【发布时间】：2014-09-28 03:27:51
【问题描述】：

奇怪的一个。我正在尝试获取一行 HTML 文本，在这种情况下，它显示电子商务网站主页的购物袋，问题是它出现在错误的图像上。我包装了图像，我确实希望文本出现在它自己的 div 中，重新做了 CSS，但它仍然不能正常工作。很难弄清楚为什么，我不想改变绝对定位，我真的不需要。那么有人可以看看并提供修复建议吗？

http://originalchuck.com/

【问题讨论】：

标签： html css text stylesheet absolute

【解决方案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>

【讨论】：

谢谢，布赖恩。看起来效果很好。