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

Question

Soy un principiante en la programación de rieles, tratando de mostrar muchas imágenes en una página. Algunas imágenes deben colocarse encima de 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, imagina 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 sobre la otra.

Answer 1

Ok, después de algún tiempo, esto es lo que aterrizó en:

.parent { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image1 { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image2 { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 70px; 
 
}

<div class="parent"> 
 
    <img class="image1" src="https://placehold.it/50" /> 
 
    <img class="image2" src="https://placehold.it/100" /> 
 
</div>

A medida que la solución más sencilla. Es decir:

Crea 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 absolutos en relación con la esquina superior izquierda de la primera imagen. El truco es corregir los parientes y los absolutos.

Answer 2

La manera más fácil de hacerlo es usar background-image, luego simplemente ponga <img> en ese elemento.

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

Answer 3

Este es un aspecto básico de lo que he hecho para hacer 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">

Source

Answer 4

Aquí está el 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 puede haber Espo's solution inco nvenient porque requiere que ubiques 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. Coloca la posición: relativa en el elemento contenedor, y luego posiciona absolutamente a los niños dentro de ella. Desafortunadamente, no puedes poner una imagen dentro de otra. Es por eso que necesitaba contenedor div. Tenga en cuenta que hice un flotador para que sea autofit a su contenido. Hacer que se muestre: el bloque en línea debería funcionar también teóricamente, pero el soporte del navegador es pobre 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 background trick. Si lo haces, es una mejor forma de hacerlo.

Answer 5

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> 

Answer 6

@ buti-oxa: No es pedante, pero su código no es válido. Los atributos HTML width y height no permiten unidades; probablemente estés pensando en las propiedades CSS width: y height:. También debe proporcionar un tipo de contenido (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> 

Dejando px; en los width y height atributos podría causar un motor de renderizado a balk.

Answer 7

Una cuestión me di cuenta que podría causar errores es que en la respuesta de rrichter, el código de abajo:

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

Answer 8

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

Esto le brinda dos capas adicionales para jugar con cada elemento, por lo que posicionar una imagen encima de otra se hace 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 una LIVE DEMO