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>

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

1 个答案: