web-dev-qa-db-fra.com

Positionnement et superposition d'image sur une autre image

Vous voyez comment la petite icône Facebook est positionnée dans le coin inférieur droit au-dessus d'une autre image?

enter image description here

Comment puis-je faire cela en utilisant un combo HTML/CSS/Rails/Prototype!? Un exemple serait génial. Peut-être dans jsfiddle.net.

htmlcssimage
22
keruilin

Voici un exemple simple utilisant des divs au lieu d'images: http://jsfiddle.net/sqJtr/

Fondamentalement, vous mettez vos deux images dans le même conteneur. Donnez au conteneur une position qui n'est pas statique (dans mon exemple, relative). Donnez ensuite l'image de superposition position: absolute et positionnez-le comme vous voulez en utilisant bottom et right.

21
zdyn

Vous pouvez utiliser css pour résoudre le problème.

div {
  position: relative;
  display: inline;
}
.imtip {
  position: absolute;
  bottom: 0;
  right: 0;
}
<div>
  <img src="http://i.stack.imgur.com/Blaly.png" />
  <img src="http://www.w3schools.com/favicon.ico" class="imtip" />
</div>

Fondamentalement, j'ai fait plus ou moins ce que ZDYN a dit, juste que vous devez inclure un display: inline dans le conteneur sinon le conteneur div s'étend sur toute la largeur.

19
Sameer Goyal

Voici. Cela se fait en utilisant 2 images.

<div class="parent">
    <img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
    <div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
</div>

.parent{
    width:200px;
    height:200px;
    position:absolute;
    z-index:0;
}

.inner{
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
}

Consultez l'exemple de travail à http://jsfiddle.net/WPWzq/

2
Hussein

Voir ma réponse à cette question .

La différence avec votre situation est que vous n'avez pas besoin de javascript si vous ne le souhaitez pas, vous pouvez simplement ajouter des divs au html et les positionner absolument au-dessus des photos.

Je pense que j'ajouterais personnellement les div en utilisant javascript de toute façon afin qu'elles n'encombrent pas le html.

0
jeroen