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

Question

Soy un principiante en la programación de Rails e intento 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 ejemplo más difícil, imaginemos 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.

Answer 1

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

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

Como la solución más sencilla.Eso es:

Cree un div relativo que se coloque en el flujo de la página;coloque la imagen base primero como relativa para que el div sepa qué tan grande debe ser;coloque las superposiciones como absolutas en relación con la parte superior izquierda de la primera imagen.El truco consiste en corregir los relativos y absolutos.

Answer 2

Esta es una mirada básica a 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">

Fuente

Answer 3

Aquí tienes 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 un inconveniente porque requiere que coloques ambas imágenes de manera absoluta.Es posible que desee que el primero se posicione en el flujo.

Por lo general, existe una forma natural de hacerlo es CSS.Pones posición:relativo en el elemento contenedor y luego coloque absolutamente a los niños dentro de él.Desafortunadamente, no puedes poner una imagen dentro de otra.Por eso necesitaba contenedor div.Observe que lo hice flotante para que se ajuste automáticamente a su contenido.Haciendo que se muestre:En teoría, inline-block también debería funcionar, pero la compatibilidad 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.

Answer 4

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

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

Puedes posicionar absolutamente pseudo elements en relación con su elemento padre.

Esto le brinda dos capas adicionales con las que jugar para cada elemento, por lo que colocar una imagen encima de otra resulta fácil, con un marcado mínimo y semántico (sin divs vacíos, 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í está un DEMO EN VIVO

Answer 6

La manera más fácil de hacerlo es usar imagen de fondo y luego simplemente poner un <img> en ese elemento.

La otra forma de hacerlo es utilizando capas CSS.Hay muchos recursos disponibles para ayudarte con esto, solo busca capas css.

Answer 7

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>

Answer 8

@buti-oxa:No quiero ser pedante, pero su código no es válido.El HTML width y height los atributos no permiten unidades;probablemente estés pensando en el CSS width: y height: propiedades.También debes proporcionar un tipo de contenido (text/css;ver el código de Espo) con el <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>

Partida px; en el width y height Los atributos pueden hacer que el motor de renderizado se bloquee.

Answer 9

Quizás sea un poco tarde pero para ello puedes 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;
    }
  }
}