Html 使用css将图像任意放置在另一个图像上

有几个类似的问题张贴，但我发现没有一个解决我的情况

我想列出要出售的物品，每个物品都在各自的分区中。当物品出售时，我想在任何此类物品上放置一个透明的“已售出”横幅，而不会完全模糊图像。我需要委托其他人在代码中添加“已售出”横幅，而无需我这样做。因此，方法越简单越好

这个站点上的大多数（如果不是全部的话）解决方案都建议在绝对定位的div中创建重叠的横幅图像。该次div包含一个img src。这看起来更像是让助手感到困惑的代码

我想如果透明的销售横幅是背景的话，它将是语义的，并且容易得多。如果我没有弄错的话，那么所需要的只是一个简单的类来添加到任何现有的div中。例如：

    <div><img src="folder/item3.png"></div> 

。。。变成

    <div><img src="folder/item3.png" class="sold"></div>

。。。这样就省去了第二个div来包含售出的图形。我尝试了这个，它似乎起了作用，但横幅仍然顽固地隐藏在项目后面，再多的Z索引和绝对定位也无法将它带到它所属的位置。（事实上，我不能完全定位它，因为它会干扰整体布局。）

---

我希望有人能提出一种解决问题的方法。

你不能使用包含图像的div的背景，因为背景总是在它下面。除非您想将产品图像本身设置为背景，然后将售出的图形作为图像放入其中

我要做的是，首先，你需要你的div包含你的形象是位置：相对。然后在它里面放置另一个div，用于放置绝对位置的Seld图标。z索引其上方的已售出图标

e、 g:

html

--2014年5月30日增补--

如果出售的标签与图像重叠——图像最初链接到另一页

…编辑代码，以便售出的div中也有一个链接，指向与图像相同的位置。然后添加以下css：

.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;} 

---

这将创建一个不可见的链接（因为文本将从页面缩进，即已售出图标div的全宽和全高-看起来似乎整个图像可以再次单击，并且不会被我的小提琴中已售出图标的错误遮挡，现在已更新。我们现在也有一个已售出的类。它仅在holder div为class=soldLooks good时显示，但这会导致与我最初得到的结果相同。换句话说，售出的图标保留在图像后面。你可以看到我正在尝试的作品，最后一幅特色图像。对我来说，我在你的网站上得到了它。通过指定soldicon类的宽度和高度（与售出的图像相同）例如：宽度：164px；高度：123px；是的，的确如此。我在多次尝试中指定了这些尺寸，并将其删除以使其正常工作。看起来现在这些部件都很合适，尽管需要一些样式来调整其在较低屏幕宽度的大小。非常感谢。现在我已经整理了更多。我完全拒绝了从CSS和代码中删除了“sell”类。此外，我从其他特色图片中删除了.soldicon类，它仍然有效。不确定为什么，但它确实有效。

.imgholder {position:relative; z-index:1;}

.soldicon {position:absolute;
    z-index:2;
    top:0; 
    left:0;
width:177px; 
    height:138px;
    background:url(http://www.flq.co.nz/images/icon-sold.gif) no-repeat top left;
}

.sold .soldicon {display:block!important;}

.soldicon {display:none;}

.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;}