Como posicionar uma imagem sobre outra em HTML?

250

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.

rrichter
fonte
1
você poderia fazer o odômetro com uma imagem usando sprites
Jason

Respostas:

432

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.

rrichter
fonte
1
É uma solução elegante. Se "a" tivesse um ID ae "b" tivesse um ID b, esse código JavaScript (configuração xe, ypor algum cálculo) funcionaria para alterar a posição de b?
DDPWNAGE
1
A esquerda: 0 é muito importante! Esqueci e não funcionou no Safari. Levei um tempo para descobrir.
Maracuja-juice
2
Ao executar o trecho de código, uma imagem não é exibida em cima da outra.
kojow7
@ kojow7 Acabei de atualizar o trecho de código para mostrá-lo em cima do outro. :-)
Craigo
1
@Me_developer Você não faria dessa maneira. Você usaria margens automáticas. w3schools.com/howto/howto_css_image_center.asp
Craigo 23/01
74

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

Espo
fonte
40

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.

buti-oxa
fonte
1
Esta é a melhor solução para mim, porque não há necessidade de especificar a largura e a altura das suas imagens e isso resultará em uma reutilização muito maior.
Iman Mohamadi
11

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.

Wez
fonte
8

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

Danield
fonte
5

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 .

Chris Bartow
fonte
5

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>
FlySwat
fonte
3

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

insira a descrição da imagem aqui

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;
    }
  }
}
Elkin Angulo
fonte
0

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

Sören Kuklau
fonte
0

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.

Pallavi Singh
fonte
Penso que um possível exemplo de código pode ajudar futuros leitores desta resposta.
entpnerd 03/02