How to place an image on top of another image in HTML?

check out the site wplayout.com. In home page I have a gallery. I would like to place a "premium" tag image on top of each image shown on home page gallery. Currently the premium image is shown on top right corner of the home page. how to achieve that?

so far i have

.ribbon {
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: absolute;
top: -3px;
right: -3px;
z-index:500;
display: block;
}

and in html I have

<span cla开发者_如何学Goss="ribbon"></span>

Thanks in advance

i think that the position:relative has to be applied to ribbon and not the container div. Try putting

.ribbon 
{
   background: url("images/premium.png") no-repeat top right;
   width: 100px;
   height: 102px;
   overflow: hidden;
   /*text-indent: -9000px;*/
   position: relative; /*changed*/
   right: -204px;  /*changed*/
   top: -230px;  /*changed*/
   z-index:500;
   display: block;
}

tried this using firebug & it worked. Hope it works for you.

Make sure the div containing the 'premium' image has position: relative set on it, like so:

Markup:

<div class="my-image">
  <img src="whatevs.jpg">
  <span class="ribbon"></span>
</div>

CSS:

.my-image {
  position: relative;
}

Divs with absolute positioning (your ribbon) are positioned relative the first parent that has position: relative, or relative to the body if no such parent exists.

Use the z-index selector in css

For your premium content add z-index:999; and on the image below use z-index:0;