Come posiziono un'immagine sopra l'altra in HTML?

Sono un principiante nella programmazione delle rotaie, nel tentativo di mostrare molte immagini su una pagina. Alcune immagini devono essere sovrapposte ad altre. Per semplificare, dire che voglio un quadrato blu, con un quadrato rosso nell'angolo in alto a destra del quadrato blu (ma non stretto nell'angolo). Sto cercando di evitare la composizione (con ImageMagick e simili) a causa di problemi di prestazioni.

Voglio solo posizionare le immagini sovrapposte l'una rispetto all'altra.

Come esempio più difficile, immagina un contachilometri posizionato all'interno di un'immagine più grande. Per sei cifre, avrei bisogno di comporre un milione di immagini diverse, o fare tutto al volo, dove tutto ciò che serve è posizionare le sei immagini sopra l'altra.

Ok, dopo qualche tempo, ecco cosa sono atterrato:

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

Come la soluzione più semplice. Questo è:

Crea un div relativo che viene inserito nel flusso della pagina; posiziona prima l'immagine di base come relativa in modo che il div sappia quanto dovrebbe essere grande; posizionare le sovrapposizioni come assolute rispetto alla parte superiore sinistra della prima immagine. Il trucco è quello di ottenere i parenti e gli assoluti corretti.

Questo è uno sguardo barebone a quello che ho fatto per far fluttuare un'immagine sopra un'altra.

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

fonte

Ecco un codice che può darti idee:

<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

Sospetto che la soluzione di Espo possa essere scomoda perché richiede di posizionare entrambe le immagini in modo assoluto. Potresti voler posizionare il primo nel flusso.

Di solito, c'è un modo naturale per farlo è il CSS. Metti posizione: relativo sull'elemento contenitore, quindi posiziona assolutamente i bambini al suo interno. Sfortunatamente, non puoi mettere un'immagine dentro un'altra. Ecco perché avevo bisogno di div container. Nota che l'ho trasformato in un float per adattarlo automaticamente al suo contenuto. Fallo visualizzare: inline-block dovrebbe funzionare anche in teoria, ma il supporto del browser è scarso.

EDIT: ho eliminato gli attributi di dimensione dalle immagini per illustrare meglio il mio punto. Se desideri che l'immagine del contenitore abbia le dimensioni predefinite e non conosci le dimensioni in anticipo, non puoi utilizzare il trucco di sfondo . Se lo fai, è un modo migliore di andare.

Un problema che ho notato che potrebbe causare errori è che nella risposta di rrichter, il codice seguente:

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

dovrebbe includere le unità px nello stile es.

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

A parte questo, la risposta ha funzionato bene. Grazie.

Puoi assolutamente posizionarti pseudo elements rispetto al loro elemento genitore.

Questo ti dà due livelli extra con cui giocare per ogni elemento - così posizionare un'immagine sopra l'altra diventa facile - con markup minimo e semantico (nessun div vuoto ecc.).

markup:

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

Ecco una DEMO LIVE

Il modo più semplice per farlo è usare l'immagine di sfondo, quindi inserire un <img> in quell'elemento.

L'altro modo di fare è usare i livelli CSS. Ci sono un sacco di risorse disponibili per aiutarti in questo, basta cercare i livelli CSS .

Stile in linea solo per chiarezza qui. Usa un vero foglio di stile 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>

Potrebbe essere un po 'tardi, ma per questo puoi fare:

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

@ buti-oxa: non essere pedante, ma il tuo codice non è valido. HTML widthe heightattributi non consentono le unità; probabilmente stai pensando al CSS width:e alle height:proprietà. Dovresti anche fornire un tipo di contenuto ( text/css; vedi il codice Espo) con il <style>tag.

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

Se si lasciano px;gli attributi widthe, è heightpossibile che un motore di rendering si blocchi.

Crea un div relativo che viene inserito nel flusso della pagina; posiziona prima l'immagine di base come relativa in modo che il div sappia quanto dovrebbe essere grande; posizionare le sovrapposizioni come assolute rispetto alla parte superiore sinistra della prima immagine. Il trucco è quello di ottenere i parenti e gli assoluti corretti.