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>
pseudo-elemento
para fazer isso?pseudo-elemento
não funcionaria creio eu