Sono un principiante della programmazione su rotaie e sto cercando di mostrare molte immagini su una pagina. Alcune immagini devono sovrapporsi ad altre. Per farla semplice, diciamo che voglio un quadrato blu, con un quadrato rosso nell'angolo superiore destro del quadrato blu (ma non stretto nell'angolo). Sto cercando di evitare il compositing (con ImageMagick e simili) a causa di problemi di prestazioni.
Voglio solo posizionare le immagini sovrapposte l'una rispetto all'altra.
Come esempio più difficile, immaginate un contachilometri posto all'interno di un'immagine più grande. Per sei cifre, avrei bisogno di comporre un milione di immagini diverse, o fare tutto al volo, dove tutto ciò che serve è posizionare le sei immagini una sopra l'altra.
Questo è uno sguardo scarno a ciò che ho fatto per far fluttuare un'immagine sopra un'altra.
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">
Ecco un codice che può darvi delle idee:
<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]
Ho il sospetto che la soluzione di Espo's possa essere scomoda perché richiede di posizionare assolutamente entrambe le immagini. Potresti volere che la prima si posizioni da sola nel flusso.
Di solito, c'è un modo naturale per farlo con i CSS. Si mette position: relative sull'elemento contenitore, e poi si posizionano assolutamente i bambini al suo interno. Sfortunatamente, non puoi mettere un'immagine dentro un'altra. Questo è il motivo per cui avevo bisogno del div contenitore. Notate che l'ho reso un float per renderlo autofit al suo contenuto. Rendendolo display: inline-block dovrebbe teoricamente funzionare lo stesso, ma il supporto del browser è scarso.
EDIT: ho eliminato gli attributi di dimensione dalle immagini per illustrare meglio il mio punto. Se vuoi che l'immagine contenitore abbia le sue dimensioni predefinite e non conosci le dimensioni in anticipo, non puoi usare il trucco dello sfondo. Se lo sai, è un modo migliore per farlo.
Il modo più semplice per farlo è usare background-image e poi mettere semplicemente un in quell'elemento.
L'altro modo di fare è usare i livelli css. C'è una tonnellata di risorse disponibili per aiutarvi con questo, basta cercare css layers.