How can i dispay and image above another image in a html page ?

Put them in divs and control their position with the style definition, z-index controls which goes on top


<div style="position: absolute;top:0px;left:0px;z-index:1">
  <img src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif">
</div>

<div style="position: absolute;top:0px;left:100px;z-index:0">
  <img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg">
</div>

in css he has position absolute so he can place the price image everywhere:
#ribbon  { position:absolute; width:150px; height:150px; z-index:1; }
/*end page styles */
.usedItemBox {
margin-bottom:10px;
}
in html he uses the div ribbon with the image of the price
<div id="ribbon">
<img alt="We Will Beat Any Price - Guaranteed!" src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif" />
</div>
pretty basic css
also look here:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Still didn't get the figure ! what i need is the easiest way to get two image one on the top of the other in addition i need to control the display on the top image i need to place a little up-left of the background image.

try this inside the body of  any html:
<table><tr><td>
<div id="ribbon" style="position:absolute; width:150px; height:150px; z-index:1;">
<img alt="We Will Beat Any Price - Guaranteed!" src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif" />
</div>
<img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg"
</td></tr></table>