Comment puis-je mettre une petite image dans le coin inférieur gauche d'une image plus grande en CSS?

Question

Je viens de terminer mon script captcha, donc il a l'image captcha puis à côté j'ai un lien qui est une petite image qui peut être cliqué pour actualiser l'image à un nouveau.

Je veux que cette petite image soit sur le dessus, dans le coin inférieur gauche de la grande image, quelqu'un peut-il m'aider avec le CSS? Ci-dessous mon code complet

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

(si vous utilisez XHTML, ne pas oublier de changer la fin de la balise image à utiliser /> au lieu de >

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

L'important pour le z-index est que #small-image a un nombre plus élevé que #big-image. Si vous répétez cet effet, utilisez des classes au lieu des identifiants.

Answer 2

Vous voulez utiliser le CSS z-index propriété pour définir quelle image affichera sur le dessus de l'autre: http://www.w3schools.com/Css/pr_pos_z-index.asp

Vous voudrez probablement utiliser le positionnement relatif ou absolu pour positionner la petite image: http://www.w3schools.com/Css/css_positioning.asp

Answer 3

Je pense que ce que vous devez faire est de définir la position de la propriété css: relative; à # images-conteneur div, et laissez les autres règles css comme elles étaient. Si vous faites cela, les images seront positionnées de manière absolue mais par rapport à leur div parente au lieu du corps (écran entier).

Eh bien ... bonne chance!

Answer 4

Le contenu de l'index Z peut être déformé selon mon expérience. Pourquoi ne pas simplement utiliser un style en ligne pour définir votre captcha comme image de fond d'un div? Quelque chose comme ça:

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