¿Cómo puedo colocar una imagen encima de otra en HTML?
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.
Sólo quiero posicionar las imágenes superpuestas una respecto a la otra.
Como ejemplo más difícil, imagine un cuentakilómetros 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.
Esto es un vistazo a lo que he hecho para hacer flotar una imagen sobre otra.
begin snippet: js hide: false console: true babel: false -->
...fin del fragmento..;
Fuente
Aquí'hay un código que puede darle ideas:
La forma más 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 una tonelada de recursos disponibles para ayudarte con esto, sólo busca css layers.