Comment positionner une image au-dessus d'une autre en HTML?

Je suis un débutant en programmation de rails, essayant de montrer de nombreuses images sur une page. Certaines images doivent être superposées à d'autres. Pour faire simple, disons que je veux un carré bleu, avec un carré rouge dans le coin supérieur droit du carré bleu (mais pas serré dans le coin). J'essaie d'éviter la composition (avec ImageMagick et similaire) en raison de problèmes de performances.

Je veux juste positionner les images qui se chevauchent les unes par rapport aux autres.

Comme exemple plus difficile, imaginez un odomètre placé à l'intérieur d'une image plus grande. Pour six chiffres, je devrais composer un million d'images différentes, ou tout faire à la volée, où tout ce qui est nécessaire est de placer les six images au-dessus de l'autre.

Ok, après un certain temps, voici ce sur quoi j'ai atterri:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

Comme la solution la plus simple. C'est:

Créez un div relatif qui est placé dans le flux de la page; placez d'abord l'image de base comme relative afin que le div sache quelle doit être sa taille; placez les superpositions comme absolues par rapport au coin supérieur gauche de la première image. L'astuce consiste à corriger les parents et les absolus.

Ceci est un regard nu sur 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">

La source

Voici du 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 d'Espo peut être gênante car elle vous oblige à positionner les deux images de manière absolue. Vous voudrez peut-être que le premier se positionne dans le flux.

Habituellement, il existe un moyen naturel de le faire est CSS. Vous placez position: relative sur l'élément conteneur, puis positionnez absolument les enfants à l'intérieur. Malheureusement, vous ne pouvez pas mettre une image dans une autre. C'est pourquoi j'avais besoin d'un conteneur div. Notez que j'en ai fait un flotteur pour qu'il s'adapte automatiquement à son contenu. Faire en sorte qu'il s'affiche: le bloc en ligne devrait également fonctionner en théorie, mais la prise en charge du navigateur y est médiocre.

EDIT: J'ai supprimé les attributs de taille des images pour mieux illustrer mon propos. Si vous souhaitez que l'image du conteneur ait ses tailles par défaut et que vous ne connaissiez pas la taille à l'avance, vous ne pouvez pas utiliser l' astuce d'arrière - plan . Si vous le faites, c'est une meilleure façon de procéder.

Un problème que j'ai remarqué qui pourrait provoquer 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;"/>

A part cela, la réponse a bien fonctionné. Merci.

Vous pouvez absolument vous positionner par pseudo elementsrapport à leur élément parent.

Cela vous donne deux couches supplémentaires pour jouer avec chaque élément - il est donc facile de positionner une image au-dessus d'une autre - avec un balisage minimal et sémantique (pas de divisions 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 une DÉMO EN DIRECT

Le moyen le plus simple consiste à utiliser background-image, puis à simplement mettre un <img> dans cet élément.

L'autre façon de faire est d'utiliser des couches CSS. Il existe une tonne de ressources disponibles pour vous aider, recherchez simplement les couches CSS .

Style en ligne 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>

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

TOUPET

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

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

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

Si vous laissez px;les attributs widthet, heightun moteur de rendu peut rechigner.

Créez un div relatif qui est placé dans le flux de la page; placez d'abord l'image de base comme relative afin que le div sache quelle doit être sa taille; placez les superpositions comme absolues par rapport au coin supérieur gauche de la première image. L'astuce consiste à corriger les parents et les absolus.