如何在CSS中的较大图像的左下角放置一个小图像？

Question

我刚刚完成了我的验证码脚本,因此它有验证码图像然后在它旁边我有一个小图像的链接,可以点击该图像将图像刷新到新图像.

我想让这个小图像位于顶部,在大图像的左下角,有人可以帮助我使用CSS吗？以下是我的完整代码

<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>

(如果您使用的是XHTML,请不要忘记更改图像标记的末尾/>而不是使用>

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;
}

z-index的重要之处在于它#small-image具有更高的数字#big-image.如果重复此效果,请使用类而不是ID.