Comment puis-je placer une image sur le dessus de l'autre en HTML?

Je suis un débutant sur les rails de la programmation, en essayant de montrer plusieurs images sur une page. Certaines images sont à poser sur le dessus des 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). Je suis en essayant d'éviter de composition (avec ImageMagick et similaires) en raison de problèmes de performances.

Je veux juste la position de chevauchement des images par rapport à une autre.

Plus difficile exemple, imaginez un compteur kilométrique, placé à l'intérieur d'une image plus grande. Pour les six chiffres, j'aurais besoin de composite d'un million de différentes images, ou tout faire à la volée, où tout ce qui est nécessaire est de placer les six images sur le dessus de l'autre.

vous pourriez faire le compteur avec une image à l'aide de sprites

InformationsquelleAutor rrichter | 2008-09-07

416

Ok, après quelques temps, voici ce que j'ai atterri sur:

CSS:
```
.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}
```
HTML:
```
<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. Qui est:

Créer un relatif à la div qui est placé dans le flux de la page; la place de l'image de base, d'abord en tant que parent, de sorte que la div sait comment grand il devrait être; placez les superpositions comme des absolus par rapport à l'angle supérieur gauche de la première image. L'astuce consiste à amener les parents et les absolus correcte.
- C'est une solution élégante. Si "a" a un ID de a et "b" a un ID de b, pourrait ce code JavaScript (réglage x et y par certains de calcul), le travail pour changer la position de b?
- La gauche: 0 est très important! Oublié et ça ne fonctionne pas dans Safari. M'a fallu un certain temps pour comprendre.
- Lors de l'exécution du fragment de code, l'image ne s'affiche pas sur le dessus de l'autre.
InformationsquelleAutor rrichter

C'est un barebones regardez ce que j'ai fait flotter une image sur une autre.

CSS:

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

HTML:

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

Source

très facile à comprendre et il a fait ce que je voulais.

InformationsquelleAutor Espo

39

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 Espo de la solution peut être gênant, car il vous oblige à positionner les deux images absolument. Vous souhaitez peut-être le premier à se positionner dans le flux.

Habituellement, il est un moyen naturel de le faire est de CSS. Vous mettez en position: relative sur l'élément conteneur, et puis absolument position des enfants à l'intérieur. Malheureusement, vous ne pouvez pas mettre une image à l'intérieur de l'autre. C'est pourquoi j'ai besoin div conteneur. L'avis que j'en ai fait un flotteur pour le faire ajuster automatiquement à son contenu. Affichage: inline-block devrait théoriquement fonctionner aussi bien, mais l'appui de navigateur pauvres.

EDIT: j'ai supprimé les attributs de taille des images pour illustrer mon point de plus. Si vous souhaitez que le conteneur de l'image pour avoir ses tailles par défaut et que vous ne connaissez pas la taille à l'avance, vous ne pouvez pas utiliser le fond de truc. Si vous le faites, c'est une meilleure façon d'aller.
- C'est la meilleure solution pour moi, car il n'est pas nécessaire de spécifier la largeur et la hauteur des images et le résultat sera beaucoup plus réutilisation.
InformationsquelleAutor buti-oxa
11

Seul problème que j'ai remarqué qui pourrait provoquer des erreurs, c'est que dans rrichter réponse, 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;"/>
```
Autre que cela, la réponse a bien fonctionné. Merci.

InformationsquelleAutor Wez
8

Vous pouvez absolument position pseudo elements par rapport à leur élément parent.

Cela vous donne deux couches supplémentaires pour jouer avec tous les éléments - ainsi, le positionnement d'une image sur le dessus de l'autre devient facile avec un minimum et un balisage sémantique (pas de vide divs 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 DÉMO

InformationsquelleAutor Danield
5

Le moyen facile de le faire est d'utiliser background-image, puis vient de mettre un <img> dans cet élément.

L'autre façon de faire est à l'aide de calques css. Il ya une tonne de ressources disponibles pour vous aider avec ceci, il suffit de chercher pour calques css.

InformationsquelleAutor Chris Bartow

De style en ligne uniquement à des fins de clarté ici. L'utilisation d'une feuille de style CSS.