Rails programlamada acemiyim ve bir sayfada birçok resim göstermeye çalışıyorum. Bazı resimler diğerlerinin üzerine yerleştirilecek. Basitleştirmek gerekirse, diyelim ki mavi bir kare istiyorum, mavi karenin sağ üst köşesinde kırmızı bir kare olsun (ama köşede sıkı olmasın). Performans sorunları nedeniyle birleştirme işleminden (ImageMagick ve benzeri ile) kaçınmaya çalışıyorum.
Sadece üst üste binen görüntüleri birbirlerine göre konumlandırmak istiyorum.
Daha zor bir örnek olarak, daha büyük bir görüntünün içine yerleştirilmiş bir kilometre sayacı hayal edin. Altı rakam için bir milyon farklı görüntüyü birleştirmem ya da hepsini anında yapmam gerekir ki bu durumda gereken tek şey altı görüntüyü diğerinin üzerine yerleştirmektir.
Bu, bir görüntüyü diğerinin üzerinde yüzdürmek için ne yaptığıma dair basit bir görünüm.
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">
İşte size fikir verebilecek bir kod:
<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]
Espo'nun çözümünün](https://stackoverflow.com/questions/48474#48484) sakıncalı olabileceğinden şüpheleniyorum çünkü her iki görüntüyü de kesinlikle konumlandırmanızı gerektiriyor. İlkinin akış içinde kendini konumlandırmasını isteyebilirsiniz.
Genellikle, bunu yapmanın doğal bir yolu CSS'dir. Kapsayıcı öğeye position: relative koyarsınız ve ardından içindeki çocukları kesinlikle konumlandırırsınız. Ne yazık ki, bir resmi diğerinin içine koyamazsınız. Bu yüzden container div'e ihtiyacım vardı. İçeriğine otomatik olarak sığdırmak için float yaptığıma dikkat edin. Display: inline-block yapmak da teorik olarak işe yarayacaktır, ancak tarayıcı desteği bu konuda zayıftır.
DÜZENLEME: Ne demek istediğimi daha iyi anlatabilmek için resimlerden boyut özelliklerini sildim. Konteyner resminin varsayılan boyutlarına sahip olmasını istiyorsanız ve boyutu önceden bilmiyorsanız, background trick kullanamazsınız. Eğer biliyorsanız, bu daha iyi bir yoldur.
Bunu yapmanın kolay yolu background-image kullanmak ve ardından bu öğeye bir koymaktır.
Yapmanın diğer yolu css katmanları kullanmaktır. Bu konuda size yardımcı olacak bir sürü kaynak var, sadece css layers araması yapın.