Comment positionner une image sur une autre en HTML?

regardez ce que j'ai fait pour faire flotter une image sur une autre.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

Source

voici le code qui peut vous donner des idées:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

je soupçonne que la solution de Espo peut être incommode parce qu'elle exige que vous positionniez les deux images de façon absolue. Vous voudrez peut-être que le premier se positionne dans le flux.

Habituellement, il y a une façon naturelle de faire qui est CSS. Vous mettez la position: relative sur l'élément container, et puis absolument position des enfants à l'intérieur. Malheureusement, vous ne pouvez pas mettre une image dans une autre. C'est pour ça que j'avais besoin de container div. Remarquez que j'en ai fait un flotteur pour le rendre autofit à son contenu. Le faire afficher: bloc en ligne devrait théoriquement fonctionner aussi bien, mais le soutien de navigateur est pauvre là.

EDIT: j'ai supprimé les attributs de taille des images pour mieux illustrer mon point. Si vous voulez que l'image du conteneur ait ses tailles par défaut et que vous ne connaissez pas la taille avant, vous ne pouvez pas utiliser le background trick . Si vous le faites, c'est une meilleure façon d'aller.

un problème que j'ai remarqué qui pourrait causer des erreurs est que dans la réponse de rrichter, le code ci-dessous:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

devrait inclure les unités px dans le style par exemple.

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

sinon, la réponse a bien fonctionné. Grâce.

vous pouvez absolument positionner pseudo elements par rapport à leur élément parent.

cela vous donne deux couches supplémentaires à jouer pour chaque élément - donc positionner une image sur une autre devient facile - avec un balisage minimal et sémantique (pas de divs vides etc).

balisage:

<div class="overlap"></div>

css:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

voici un "LIVE DEMO

style Inline uniquement pour plus de clarté ici. Utilisez une vraie feuille de style CSS.

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

la manière simple de le faire est d'utiliser background-image puis de mettre un dans cet élément.

l'autre façon de faire est d'utiliser des couches css. Il ya une tonne de ressources disponibles pour vous aider avec ceci, il suffit de chercher calques css .

@buti-oxa: pour ne pas être pédant, mais votre code n'est pas valide. Les attributs HTML width et height ne permettent pas les unités; vous pensez probablement aux propriétés CSS width: et height: . Vous devez également fournir un type de contenu ( text/css ; voir le code Espo) avec la balise <style> .

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

Quitter px; dans le width et height attributs peut provoquer un moteur de rendu à la besogne.

il est peut-être un peu tard, mais pour cela vous pouvez faire:

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}