There are quite a few ways to do this.
If the bottom image has no interactivity at all, simply make it a background image.
#my-box { display:block; width:27px; height: 27px; background: url(/images/my-bg.jpg) top left no-repeat; }
#my-box img { border: none; }
<p id="my-box"><img src="/images/my-icon.gif" alt="My icon"></p>
Note that both PNG and GIF support transparency. GIF still excels as far as reduced file size; it has a limited palette and if you can create, say, a 16 color image without serious degradation, it will be far smaller than a PNG. The down side is transparent edges don't render. Always try GIF first, then resort to PNG.
A second way, if both images need to be "free" is what Leosghost alludes to - create a relatively positioned container and position the items inside it using z-index.
#my-box,#img1,#img2,#img3 { display:block; width:27px; height: 27px; border:none; }
#my-box { position: relative; }
#img1 { z-index: 400; }
#img2 { z-index: 450; }
#img3 { z-index: 500; }
<p id="my=box">
<img src="/images/icon1.gif" id="img1" alt="Icon 1">
<img src="/images/icon2.gif" id="img2" alt="Icon 2">
<img src="/images/icon3.gif" id="img3" alt="Icon 3">
</p>
Note we don't have to spec top:0; left:0; as those are the defaults. This is useful if you want to create fade-in/fade-out slide shows using Jquery, combining animate() and fade/hide and resetting the z-index.
Another method is using sprites, but it's really just one image. The most simple example, let's change the img to an anchor and set mouseover states.
<p id="my-box"><a href="some-link">This text won't display</a></p>
#my-box,#my-box a { display:block; width:27px; height: 27px; border:none; outline:none; text-indent:-50000px; }
#my-box a { background: url(/images/facebook.gif) top left no-repeat; }
#my-box a { background-position: bottom left; }
The image is actually twice the object's height, so you'd have an image that is 27 px wide by 54 px tall with the "normal state" in the top half, mouseover state in the bottom half:
normal state
------------
mouseover state
Note also it's the text-indent and outline properties that allow us to use an SE descriptive link text and still have it not show, just let the BG image show. Using this concept, you can have the single image position anywhere you want and have multiple images in it. Synonymous with the above,
/* x first, y second when using pixel values, always from upper left */
#my-box a { background: url(/images/facebook.gif) 0 0 no-repeat; }
#my-box a { background-position: 0 -27px; }
There are other ways to do it too, but these are the three I use almost daily.
