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 -->
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">
...fin del fragmento..;
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][1]
Sospecho que la solución de Espo's puede ser inconveniente porque requiere que se posicionen absolutamente ambas imágenes. Es posible que quieras que la primera se posicione en el flujo.
Por lo general, hay una forma natural de hacer eso 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. Es por eso que necesitaba div contenedor. Fíjate en que le he puesto float para que se adapte automáticamente a su contenido. Hacerlo display: inline-block debería funcionar teóricamente también, pero el soporte de los navegadores es pobre en este aspecto.
EDIT: He eliminado los atributos de tamaño de las imágenes para ilustrar mejor mi punto. Si quieres que la imagen contenedora tenga su tamaño por defecto y no sabes el tamaño de antemano, no puedes usar el truco del fondo. Si lo sabes, es una mejor manera de hacerlo.
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.