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

Soy un principiante en la programación de rieles, intento mostrar muchas imágenes en una página. Algunas imágenes deben colocarse sobre otras. Para hacerlo simple, digamos que quiero un cuadrado azul, con un cuadrado rojo en la esquina superior derecha del cuadrado azul (pero no apretado en la esquina). Estoy tratando de evitar la composición (con ImageMagick y similares) debido a problemas de rendimiento.

Solo quiero colocar imágenes superpuestas entre sí.

Como un ejemplo más difícil, imagine un odómetro colocado dentro de una imagen más grande. Para seis dígitos, necesitaría componer un millón de imágenes diferentes, o hacerlo todo sobre la marcha, donde todo lo que se necesita es colocar las seis imágenes encima de la otra.

Ok, después de un tiempo, esto es lo que aterricé:

.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 la solución más simple. Es decir:

Cree un div relativo que se coloca en el flujo de la página; coloque la imagen base primero como relativa para que el div sepa cuán grande debería ser; coloque las superposiciones como absolutas en relación con la esquina superior izquierda de la primera imagen. El truco es conseguir que los parientes y los absolutos sean correctos.

Esta es una mirada básica 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 darle 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 coloque 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 que es CSS. Pones position: relative en el elemento contenedor y luego posicionas absolutamente a los niños dentro de él. Desafortunadamente, no puedes poner una imagen dentro de otra. Por eso necesitaba contenedor div. Tenga en cuenta que lo hice flotante para que se ajuste automáticamente a su contenido. Hacer que se muestre: el bloqueo en línea debería funcionar teóricamente también, pero el soporte del navegador es deficiente allí.

EDITAR: eliminé los 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 hace, es una mejor manera de hacerlo.

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

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

debe incluir las unidades px dentro del estilo, por ejemplo.

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

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

Puede posicionarse absolutamente en pseudo elementsrelació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 divisiones vacías, etc.).

margen:

<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 una DEMO EN VIVO

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

La otra forma de hacerlo es usar capas CSS. Hay muchos recursos disponibles para ayudarlo con esto, solo busque capas css .

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

Puede ser un poco tarde, pero para esto 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>

HABLAR CON DESCARO A

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

@ buti-oxa: No debe ser pedante, pero su código no es válido. El HTML widthy los heightatributos no permiten unidades; Probablemente estés pensando en el CSS width:y las height:propiedades. También debe proporcionar un tipo de contenido ( text/css; consulte el código de Espo) con la <style>etiqueta.

<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;los atributos widthy heightpuede hacer que un motor de renderizado se resista.

Cree un div relativo que se coloca en el flujo de la página; coloque la imagen base primero como relativa para que el div sepa cuán grande debería ser; coloque las superposiciones como absolutas en relación con la esquina superior izquierda de la primera imagen. El truco es conseguir que los parientes y los absolutos sean correctos.