¿Cómo posicionar una imagen encima de otra en HTML?

Esta es una mirada a pelo a lo que he hecho para flotar una imagen sobre otra.

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

Fuente

Aquí hay un código que puede darte ideas:

<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

Sospecho que la solución de Espo puede ser inconveniente porque requiere que posiciones ambas imágenes absolutamente. Es posible que desee que el primero se posicione en el flujo.

Por lo general, hay una forma natural de hacerlo es CSS. Coloca position: relative en el elemento contenedor, y luego coloca absolutamente a los niños dentro de él. Desafortunadamente, no se puede poner una imagen dentro de otra. Eso es por qué necesitaba container div. Observe que lo hice un flotador para que se autoajuste a su contenido. Hacer que se muestre: en teoría, el bloque en línea también debería funcionar, pero el soporte del navegador es pobre allí.

EDITAR: Eliminé atributos de tamaño de las imágenes para ilustrar mejor mi punto. Si desea que la imagen del contenedor tenga sus tamaños predeterminados y no conoce el tamaño de antemano, no puede usar el truco de fondo . Si lo haces, es una mejor manera de hacerlo.

Un problema que noté que podría causar errores es que en la respuesta de rrichter, el siguiente código:

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

Debe incluir las unidades px dentro del estilo eg.

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

Aparte de eso, la respuesta funcionó bien. Gracias.

Puede colocar absolutamente pseudo elements en relación con su elemento padre.

Esto le da dos capas adicionales para jugar con cada elemento, por lo que colocar una imagen encima de otra se vuelve fácil, con un marcado mínimo y semántico (sin divs vacíos, etc.).

Marcado:

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

Aquí hay un DEMOSTRACIÓN EN VIVO

Estilo en línea solo para mayor claridad aquí. Utilice una hoja 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>

La manera fácil de hacerlo es usar background-image y luego simplemente poner un en ese elemento.

La otra forma de hacerlo es usando capas css. Hay un montón de recursos disponibles para ayudarlo con esto, solo busque capas css.

@buti-oxa: No quiero ser pedante, pero tu código no es válido. Los atributos HTML width y height no permiten unidades; probablemente esté pensando en las propiedades CSS width: y height:. También debe proporcionar un content-type (text/css; consulte el código de Espo) con la etiqueta <style>.

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

Dejar px; en los atributos width y height puede hacer que un motor de renderizado se oponga.

Puede ser un poco tarde, pero para esto se puede hacer:

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