Comment positionner une image sur une autre en HTML?

je suis un débutant à la 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 trop dans le coin). J'essaie d'éviter le compositing (avec ImageMagick et similaire) en raison de problèmes de performance.

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

comme un exemple plus difficile, imaginez un odomètre placé à l'intérieur d'une image plus grande. Pour les 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.

214
demandé sur computingfreak 2008-09-07 18:31:25
la source

9 ответов

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;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}
<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

comme solution la plus simple. C'est-à-dire:

créer un div relatif qui est placé dans le flux de la page; placer l'image de base d'abord comme relative de sorte que le div sache quelle taille il devrait être; placer les overlays comme absolues relatives à la gauche supérieure de la première image. L'astuce est d'obtenir les parents et absolues correct.

388
répondu rrichter 2016-12-02 14:44:15
la source

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

59
répondu Espo 2016-12-02 14:56:48
la 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.

34
répondu buti-oxa 2017-05-23 14:47:29
la source

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.

11
répondu Wez 2011-11-29 10:07:46
la source

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

8
répondu Danield 2013-01-21 12:07:35
la source

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>
5
répondu FlySwat 2016-06-12 23:42:21
la source

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 .

4
répondu Chris Bartow 2008-09-07 18:40:21
la source

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

0
répondu Sören Kuklau 2008-09-07 19:50:41
la source

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

enter image description here

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;
    }
  }
}
0
répondu Elkin Angulo 2018-08-01 20:37:50
la source

Autres questions sur graphics html css optimization