Как я могу поместить маленькое изображение в левый нижний угол большего изображения в 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. Если вы повторяете этот эффект, используйте классы вместо идентификаторов.

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: относительный; на # 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>