Comment laisser une image HTML chevaucher une autre

<div class="mainRunner">
    <img src="../App_Themes/Default/images/a.gif" />
    <img src="../App_Themes/Default/images/b.gif" />
</div>

Je veux b.gif le chevauchement a.gif plutôt que d'aller sur une nouvelle ligne - comment puis-je y parvenir?

source d'informationauteur zomb

  1. 1

    Assurez-vous que le l'élément contenant (emballage div) a le positionnement relatif appliquée.

    div.mainRunner { position:relative;}

    Après cela, vous pouvez effectuer l'une des opérations suivantes.

    1. Appliquer un nom de classe à chaque image afin de la carte avec le positionnement absolu.

      div.mainRunner img.classname { position:absolute; top:__; left:__;}

    Enfin appliquer z-index à l'image de la classe.

    div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:50;}

    Et pour la deuxième image;

    div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}

    Si vous n'avez aucun contrôle sur l'application des classes pour les images, puis le faire (sur l'hypothèse que seulement 2 images seront dans cette div;

    div.mainRunner img.classname:first-child { position:absolute; top:__; left:__; z-index:50;}
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}
  2. 0

    Vous pouvez utiliser le positionnement absolu (merci de ne pas), ou des marges négatives avec display:inline.