Como posiciono uma imagem em cima da outra em HTML?

Question

Sou iniciante em programação Rails, tentando mostrar muitas imagens em uma página.Algumas imagens devem ser colocadas em cima de outras.Para simplificar, digamos que quero 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 ImageMagick e similares) devido a problemas de desempenho.

Eu só quero posicionar imagens sobrepostas umas em relação às outras.

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

Answer 1

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

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

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

Crie uma div relativa que seja colocada no fluxo da página;coloque a imagem base primeiro como relativa para que o div saiba quão grande ela deve ser;coloque as sobreposições como valores absolutos em relação ao canto superior esquerdo da primeira imagem.O truque é acertar os parentes e os absolutos.

Answer 2

Esta é uma visão básica do que 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

Answer 3

Aqui está o código que pode lhe dar ideias:

<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

Eu suspeito que A solução de Espo pode ser inconveniente porque exige que você posicione ambas as imagens de forma absoluta.Você pode querer que o primeiro se posicione no fluxo.

Normalmente, existe uma maneira natural de fazer isso: CSS.Você coloca a posição:relativo no elemento contêiner e, em seguida, posicione absolutamente os filhos dentro dele.Infelizmente, você não pode colocar uma imagem dentro de outra.É por isso que precisei do container div.Observe que eu fiz um float para ajustá-lo automaticamente ao seu conteúdo.Fazendo com que seja exibido:teoricamente, o inline-block também deveria funcionar, mas o suporte do navegador é ruim.

EDITAR:Excluí atributos de tamanho das imagens para ilustrar melhor meu argumento.Se você quiser que a imagem do contêiner tenha seus tamanhos padrão e não souber o tamanho de antemão, não poderá usar o truque de fundo.Se você fizer isso, é o melhor caminho a seguir.

Answer 4

Um problema que percebi que pode 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 px dentro do estilo, por exemplo.

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

Fora isso, a resposta funcionou bem.Obrigado.

Answer 5

Você pode absolutamente posicionar pseudo elements em relação ao seu elemento pai.

Isso oferece duas camadas extras para brincar para cada elemento - tornando mais fácil posicionar uma imagem em cima da outra - com marcação mínima e semântica (sem divs vazios, 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á um DEMONSTRAÇÃO AO VIVO

Answer 6

A maneira mais fácil de fazer isso é usar background-image e colocar um <img> nesse elemento.

A outra maneira de fazer isso é usando camadas CSS.Existem muitos recursos disponíveis para ajudá-lo com isso, basta pesquisar por camadas CSS.

Answer 7

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

Answer 8

@buti-oxa:Não quero ser pedante, mas seu código é inválido.O HTML width e height os atributos não permitem unidades;você provavelmente está pensando no CSS width: e height: propriedades.Você também deve fornecer um tipo de conteúdo (text/css;veja o código de Espo) com o <style> marcação.

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

Saindo px; no width e height atributos podem fazer com que um mecanismo de renderização pare.

Answer 9

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