CSS - Overlaying one image on top of another

Question

I can’t better describe it in words, so I’ll show you the pictures.

This is how my designer wants Gravatar images to appear on the sidebar of our website:

Here is the overlay image I made (screenshot from Photoshop):

Here's what it looks like right now ...

Not quite perfect, I think you will agree. This is the CSS code I'm using:

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

And here is XHTML (and a bit of PHP to extract Gravatar based on the email address of the user that is selected from our database):

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

So what can I do? I cannot use relative positioning since the word “Search” in the section below remains shifted to the right.

Thank you for your help!

Jack

Answer 1

z-index, ? , - ? .

<div class="gravatar-sidebar">
     <img class="overlay-image" src="images/gravataroverlay.png" />
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>

/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}

Answer 2

? ?

, div . , . , , , 0,0, .

    <div class="gravatarsidebar">
        <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
        echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
        <div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div>  
    </div>