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。

Answer 2

您需要使用CSS z-index 属性来设置哪个图像将显示在另一个上面： http://www.w3schools.com/Css/pr_pos_z-index.asp

您可能希望使用相对或绝对定位来定位小图像： http://www.w3schools.com/Css/css_positioning.asp

Answer 3

我认为你需要做的是设置css属性position：relative;到＃images-container div，并保留其他css规则。如果你这样做，图像将被绝对定位，但相对于父div而不是身体（整个屏幕）。

好吧..祝你好运！

Answer 4

根据我的经验，Z-index的东西可能会变得草率。为什么不使用内联样式将验证码设置为div的背景图像？像这样：

<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>

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

4 个答案: