Question

I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.

I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code

<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>

Answer 1

HTML

<div id="images-container">
     <img src="image-big.png" alt="Big Image" id="big-image">
     <img src="image-small.png" alt="Small Image" id="small-image">
</div>

(if you are using XHTML, don’t forget to change the end of the image tag to use /> instead of >

CSS

#images-container {
    position:relative;
}
#big-image {
    position:absolute; /* position:absolute aligns to the parent container
                          which in the HTML above is the <div> element */
    bottom:0;
    left:0;
    z-index:0;
}
#small-image {
    position:absolute;
    bottom:0;
    left:0;
    z-index:1;
}

The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.