Weird one. I'm trying to get a line of HTML text, in this case one that says SHOP BAGS for the homepage of an e-commerce site and the problem is its appearing over the wrong image. I wrapped the image I do want the text to appear in its own div, re-did the CSS but it's still not working right. Stumped trying to figure out why and I don't want to change the absolute positioing and I really shouldn't need to. So can someone take a peek and offer a suggestion to a fix?
The absolute positioned elements are going to the top of the next relative positioned element. Reduce absolute position boundaries to the scope of a parent element by making the parent position relative.
.thumbnail a {
position: relative;
display: block;
}
I would apply like above because .text-content is positioned within the a tag
.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>