Place image arbitrarily over another image using css - html

Question

There are several similar questions posted, but none that I found addresses my situation.
I would like to list items for sale, each in their own div. When an item sells, I'd like to place a transparent "sold" banner over any such item without fully obscuring the image. I will need to delegate someone else to add the "sold" banner in the code without the need for me to do this. So the simpler the method, the better.
Most, if not all, solutions on this site recommend creating the overlapping banner image in an absolutely positioned div. That secondary div contains an img src. This is looking like a lot more code to confuse the helper.
I gather it would be semantic and a lot easier if the transparent SOLD banner were a background. If I'm not mistaken, then all that would be needed is a simple class to add to any existing div. For example:
<div><img src="folder/item3.png"></div>
... becomes
<div><img src="folder/item3.png" class="sold"></div>
... thus doing away with a second div to contain the SOLD graphic. I tried this, and it appeared to work, but the banner remained stubbornly behind the item and no amount of Z-indexing and absolute positioning would get it out front where it belongs. (Actually I can't absolutely position this anyway since it interferes with the overall layout.)
I hope that someone can suggest a way to do this that solves the problem.

Answer 1

You cant use a background of the div containing the image because the background would always be under it. Unless you want to set the product image itself to a background and then just put the sold graphic into it as an image.
What I would do is, firstly you need your div containing your image to be position:relative. Then put another div inside it for the sold icon which is positioned absolute. z-index the sold icon above it.
e.g: http://jsfiddle.net/z2V2B/1/
html
<div class="imgholder"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>
<div class="imgholder sold"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>
css
.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;}
-- ADDITIONAL 30/05/14--
If the SOLD label is overlapping the image -- which was originally linked to another page
...dit the code so that the sold div also has a link inside it to the same place as the image. Then add the following css:
.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;}
what this will do is create an invisible link (because the text will be indented off the page that is the full width and height of the sold icon div - it will seemlessly be as if the whole image is clickable again and not obscured by the sold icon