html - texto - poner un div sobre una imagen

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

Question

Soy un principiante en la programación de rieles, intentando mostrar muchas imágenes en una página. Algunas imágenes son para poner 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.

Sólo 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 sobre la otra.

Answer 1

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

Answer 2

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 la solución de Espo puede ser inconveniente porque requiere que coloques 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. Usted coloca position: relativo en el elemento contenedor, y luego coloca a los niños en su interior. Desafortunadamente, no puedes poner una imagen dentro de otra. Es por eso que necesitaba contenedor div. Observe que lo hice flotar para que se ajuste automáticamente a su contenido. Haciéndolo mostrar: el bloque en línea debería funcionar teóricamente también, 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 truco de fondo . Si lo haces, es una mejor manera de ir.

Answer 3

Esta es una mirada de barebones 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">

Source

Answer 4

Estilo en línea sólo 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 5

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

La otra forma de hacerlo es usando capas css. Hay una tonelada y recursos disponibles para ayudarlo con esto, solo busque capas css .

Answer 6

Ok, después de un tiempo, aquí es en lo que aterricé:

.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. 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 qué tan grande debe ser; coloque las superposiciones como absolutos en relación con la parte superior izquierda de la primera imagen. El truco es conseguir que los familiares y absolutos sean correctos.

Answer 7

Puede posicionar absolutamente los pseudo elements 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 sobre otra se vuelve fácil, con un mínimo y un marcado 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í hay una DEMO EN VIVO

Answer 8

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

Answer 9

Un problema que noté que podría causar errores es que, en la respuesta del experto, 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.