Ik'ben een beginner in rails programmeren, en probeer veel afbeeldingen op een pagina te tonen. Sommige afbeeldingen moeten boven op andere liggen. Om het eenvoudig te maken, stel ik wil een blauw vierkant, met een rood vierkant in de rechterbovenhoek van het blauwe vierkant (maar niet strak in de hoek). Ik probeer compositing te vermijden (met ImageMagick en dergelijke) vanwege performance problemen.
Ik wil alleen overlappende afbeeldingen ten opzichte van elkaar positioneren.
Als een moeilijker voorbeeld, stel je een kilometerteller voor geplaatst in een grotere afbeelding. Voor zes cijfers zou ik een miljoen verschillende beelden moeten samenstellen, of het allemaal "on the fly" doen, waarbij alles wat nodig is de zes beelden bovenop de andere te plaatsen.
Dit is een kale blik op wat ik gedaan heb om het ene beeld boven het andere te laten zweven.
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">
Hier's code die u op ideeën kan brengen:
<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]
Ik vermoed dat Espo's oplossing onhandig kan zijn omdat het vereist dat je beide afbeeldingen absoluut positioneert. Misschien wil je dat de eerste zichzelf positioneert in de flow.
Meestal is er een natuurlijke manier om dat te doen is CSS. Je zet position: relative op het container element, en dan positioneer je de children er absoluut in. Helaas kun je de ene afbeelding niet binnen de andere plaatsen. Dat is waarom ik container div nodig had. Merk op dat ik er een float van heb gemaakt om het autofit te maken met zijn inhoud. Er display: inline-block van maken zou theoretisch ook moeten werken, maar browser-ondersteuning is hier slecht.
EDIT: Ik heb de grootte-attributen van de afbeeldingen verwijderd om mijn punt beter te illustreren. Als je wilt dat de containerafbeelding zijn standaardgrootte heeft en je weet de grootte niet van tevoren, dan kun je de background truc niet gebruiken. Als je dat wel doet, is het een betere manier om te gaan.
De gemakkelijke manier om het te doen is om background-image te gebruiken en dan gewoon een in dat element te zetten.
De andere manier is om css layers te gebruiken. Er zijn veel bronnen beschikbaar om je hiermee te helpen, zoek maar eens op css layers.