Como posicionar uma imagem sobre outra em HTML?

Sou iniciante na programação de trilhos, tentando mostrar muitas imagens em uma página. Algumas imagens são colocadas em cima de outras. Para simplificar, digamos que eu queira um quadrado azul, com um quadrado vermelho no canto superior direito do quadrado azul (mas não apertado no canto). Estou tentando evitar a composição (com o ImageMagick e similares) devido a problemas de desempenho.

Eu só quero posicionar imagens sobrepostas uma em relação à outra.

Como um exemplo mais difícil, imagine um odômetro colocado dentro de uma imagem maior. Para seis dígitos, eu precisaria compor um milhão de imagens diferentes ou fazer tudo rapidamente, onde tudo o que é necessário é colocar as seis imagens em cima da outra.

Ok, depois de algum tempo, aqui está o que eu cheguei:

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

Como a solução mais simples. Isso é:

Crie uma div relativa que é colocada no fluxo da página; coloque a imagem base primeiro como relativa, para que a div saiba qual deve ser o tamanho; coloque as sobreposições como absolutas em relação à parte superior esquerda da primeira imagem. O truque é acertar os parentes e os absolutos.

Este é um aspecto básico do que eu fiz para flutuar uma imagem sobre a outra.

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

Aqui está o código que pode lhe dar idéias:

<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

Suspeito que a solução da Espo possa ser inconveniente porque exige que você posicione as duas imagens absolutamente. Você pode querer que o primeiro se posicione no fluxo.

Geralmente, existe uma maneira natural de fazer isso é CSS. Você coloca position: relative no elemento container e, em seguida, posiciona absolutamente as crianças dentro dele. Infelizmente, você não pode colocar uma imagem dentro de outra. É por isso que eu precisava de div de contêiner. Observe que eu fiz um float para ajustá-lo automaticamente ao seu conteúdo. Fazendo com que seja exibido: o bloco em linha também deve, teoricamente, funcionar, mas o suporte ao navegador é ruim lá.

Edição: Eu apaguei atributos de tamanho das imagens para ilustrar melhor o meu ponto. Se você deseja que a imagem do contêiner tenha seus tamanhos padrão e não saiba o tamanho antes, não poderá usar o truque em segundo plano . Se o fizer, é o melhor caminho a percorrer.

Um problema que notei que poderia causar erros é que, na resposta de rrichter, o código abaixo:

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

deve incluir as unidades de px no estilo, por exemplo.

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

Fora isso, a resposta funcionou bem. Obrigado.

Você pode posicionar absolutamente em pseudo elementsrelação ao elemento pai.

Isso oferece duas camadas extras para você brincar com cada elemento - assim, fica fácil posicionar uma imagem sobre a outra - com marcação mínima e semântica (sem divs vazias etc.).

marcação:

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

Aqui está uma demonstração ao vivo

A maneira mais fácil de fazer isso é usar a imagem de fundo e, em seguida, basta colocar um <img> nesse elemento.

A outra maneira de fazer é usar camadas de css. Há muitos recursos disponíveis para ajudá-lo com isso, basta procurar por camadas de css .

Estilo em linha apenas para maior clareza aqui. Use uma folha de estilo CSS real.

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

Pode ser um pouco tarde, mas para isso você pode fazer:

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: Não é pedante, mas seu código é inválido. O HTML widthe os heightatributos não permitem unidades; você provavelmente está pensando no CSS width:e nas height:propriedades. Você também deve fornecer um tipo de conteúdo ( text/css; consulte o código da Espo) com a <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>

Deixar px;nos atributos widthe heightpode fazer com que um mecanismo de renderização seja recusado.

Crie uma div relativa que é colocada no fluxo da página; coloque a imagem base primeiro como relativa, para que a div saiba qual deve ser o tamanho; coloque as sobreposições como absolutas em relação à parte superior esquerda da primeira imagem. O truque é acertar os parentes e os absolutos.