1

Estou tendo problemas em posicionar uma imagem atrás da outra sem ser usando position absolute/fixed. Quando se usa divs no lugar de imgs, se você aplicar um float:left, ela fica no contexto acima das outrs divs, ficando sobreposta em relação as outras divs, mas com img isso não funciona.

Exemplo com DIVS:

.wrap-elEx {
  margin-bottom: 20px
}
.elEx {
  width: 40px;
  height: 40px
}

.elEx_first {
  background-color: #8E44AD;
  float: left/* Esse elemento ficará a frente do outro */
}
.elEx_last {
  background-color: #23b14d
}
Exemplo com DIV
<div class="wrap-elEx">
  <div class="elEx elEx_first"></div>
  <div class="elEx elEx_last"></div>
</div>

Exemplo com IMG
<div class="wrap-elEx">
  <img src="https://i.imgur.com/KJHh65N.jpg" class="elEx elEx_first">
  <img src="https://i.imgur.com/G6WP6yB.jpg" class="elEx elEx_last">
</div>

7
  • 1
    Eu achei que era por conta do display block que as divs tem por padrão, mas não, elas se comportam de maneiras diferentes mesmo, não sei por qual motivo, e agora fiquei curioso rsrs. Show de bola a pergunta! Commented 4/07/2018 às 13:50
  • 1
    Já penseu em usar um pseudo-elemento para fazer isso?
    – hugocsl
    Commented 4/07/2018 às 14:10
  • tem que ser imagens diferentes, então um pseudo-elemento não funcionaria creio eu Commented 4/07/2018 às 14:31
  • 1
    Jef funciona com imgs diferentes sim, vou editar minha resposta e colocar uma opção desse tipo, mas o pseudo elemento não é direto na tag img mas sím na div em que a img está dentro!
    – hugocsl
    Commented 4/07/2018 às 14:34
  • 1
    Cara até consegui fazer com pseudo-elemento, mas ou vc usa o content:url() com a imagem já no tamanho certinho que vc precisa, ou vc vai ter que usar a img como background-image desse ::after. Alé disso vc vai precisar colocar position:relative na div que vai receber esse pseudo elemento, então acho que essa opção não vai te servir... Mas se quiser me fala que eu faço um edit na minha resposta com essa opção
    – hugocsl
    Commented 4/07/2018 às 14:48

1 Resposta 1

1

Cara vc pode usar transform:translateX(-100%) na segunda imagem para coloca-la por cima da primeira, não precisa usar position ou float

Segue o exemplo.

.wrap-elEx {
  margin-bottom: 20px
}
.elEx {
  width: 40px;
  height: 40px
}

.elEx_first {
  background-color: #8E44AD;
}
.elEx_last {
  background-color: #23b14d
}
img.elEx_last {
    transform: translateX(-95%);
}
Exemplo com IMG e transform: translateX de -95% para vc ver que ficou por cima mesmo... não tem float ou position
<div class="wrap-elEx">
  <img src="https://i.imgur.com/KJHh65N.jpg" class="elEx elEx_first">
  <img src="https://i.imgur.com/G6WP6yB.jpg" class="elEx elEx_last">
</div>

OBS 1: Importante... o transforme só joga uma imagem para cima da outra, porém ela continua ocupando o espaço onde deveria estar, então se vc colocar por exemplo um texto após a segunda imagem vc vai ver que vai ficar um espaço "vazio" entre as imagens sobrepostas e o texto...

OBS 2: Não sei se é o seu caso, mas vc pode usar um pseudo-elemento para colocar uma imagem por cima da outra tb, sem precisar de incluir outra img direto no html

Caso queira usar segue uma opção com pseudo-elemento. Mas como falei no comentário "ou vc usa o content:url() com a imagem já no tamanho certinho que vc precisa, ou vc vai ter que usar a img como background-image desse ::after. Além disso vc vai precisar colocar position:relative na div que vai receber esse pseudo elemento" Expanda o código abaixo para ver o código direitinho.

.wrap-elEx {
    margin-bottom: 20px;
    width: 40px;
    height: 40px;
    position: relative;
}
.wrap-elEx::after {
    content: "";
    background-image: url(https://i.imgur.com/G6WP6yB.jpg);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 5px; /* o left tem que ser 0, só deixei 5 pra vc ver a img por baixo */
}
.elEx {
    width: 40px;
    height: 40px;
}
<div class="wrap-elEx">
    <img src="https://i.imgur.com/KJHh65N.jpg" class="elEx ">
</div>

1
  • tem que ser imagens diferentes, então um pseudo-elemento não funcionaria creio eu, a sua solução deixa parte da imagem sobreposta visível isso ta certo ou é só aqui que se comporta assim rsrs Commented 4/07/2018 às 14:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .