css - 如何在 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。