Merci, mais meme avec un position:absolute, le positionnement voulu est dur à obtenir... si je place la balise figcaption avant img, en placant le figcaption en position:absolute (sans attribuer de left ou top) alors la balise sort du flux (normal) et l'img remonte et passe en arrière plan.
Le résultat obtenu s'approche, mais j'aimerai que le figcaption se place dans le bas de l'img et non dans le haut!
J'ai bien pensé à inverser l'ordre de figcaption et img, mais si c'est l'img qui sort du flux, alors le figcaption remonte de la meme hauteur que l'img (se retrouve en haut de l'img) comme précédement sauf qu'en plus, l'img est superposée au figcaption, le rendant illisible.
Si je souhaite déplacer plus précisément la position:absolute, cela se fait par référence à la page... Aucun des blocs parents n'étant dans ce meme type de positionnement.
<a href="" id="">
<figure>
<figcaption>image 1</figcaption>
<img src="./images/1.jpg" alt="">
</figure>
</a>
<a href="" id="">
<figure>
<figcaption>image 2</figcaption>
<img src="./images/2.jpg" alt="">
</figure>
</a>
<a href="" id="">
<figure>
<figcaption>image 3</figcaption>
<img src="./images/3.jpg" alt="">
</figure>
</a>
Pour résumer ce que je cherche, c'est aligner les figure, et que chaque figure contienne l'img avec le figcaption superposé et placé dans le bas de l'img.
Voici ce qui s'approche le plus pour l'instant:
figure {
border:1px solid red;
width:200px;
height:200px;
}
figcaption {
width:200px;
text-align:center;
background-color:rgba(255,255,255,0.5);
position:absolute;
}
img {
width:200px;
height:200px;
}
Quelqu'un sait il m'aider à positionner le figcaption dans le bas de l'image?
