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


250

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.


1
vous pouvez faire l'odomètre avec une image en utilisant des sprites
Jason

Réponses:


432

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.


1
C'est une solution élégante. Si "a" avait un ID de aet "b" avait un ID de b, ce code JavaScript (paramètre xet ypar certains calculs) pourrait- il fonctionner pour changer la position de b?
DDPWNAGE

1
La gauche: 0 est très important! Je l'ai oublié et cela n'a pas fonctionné dans Safari. Cela m'a pris un certain temps pour le comprendre.
jus de maracuja

2
Lors de l'exécution de l'extrait de code, une image ne s'affiche pas au-dessus de l'autre.
kojow7

@ kojow7 Je viens de mettre à jour l'extrait de code pour les afficher les uns sur les autres. :-)
Craigo

1
@Me_developer Vous ne le feriez pas de cette façon. Vous utiliseriez des marges automatiques. w3schools.com/howto/howto_css_image_center.asp
Craigo

74

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


40

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.


1
C'est la meilleure solution pour moi car il n'est pas nécessaire de spécifier la largeur et la hauteur de vos images et cela se traduira par une réutilisation beaucoup plus.
Iman Mohamadi

11

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.


8

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


5

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 .


5

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>

3

Il peut être un peu tard mais pour cela vous pouvez faire:

entrez la description de l'image ici

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

0

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


0

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.


Je pense qu'un exemple de code possible pourrait aider les futurs lecteurs de cette réponse.
entpnerd
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.