html - 如何在HTML中将一个图像放在另一个图像上？(How do I position one image on top of another in HTML?)

Question

I'm a beginner at rails programming, attempting to show many images on a page.

(我是rails编程的初学者，试图在页面上显示许多图像。)

Some images are to lay on top of others.

(有些图像要放在其他图像之上。)

To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner).

(为了简单起见，我想要一个蓝色正方形，蓝色正方形的右上角有一个红色正方形（但在角落里不紧）。)

I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.

(由于性能问题，我试图避免合成（使用ImageMagick和类似）。)

I just want to position overlapping images relative to one another.

(我只想将重叠的图像相对于彼此放置。)

As a more difficult example, imagine an odometer placed inside a larger image.

(作为一个更难的例子，想象一下里程表放在一个更大的图像内。)

For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.

(对于六位数字，我需要合成一百万个不同的图像，或者在运行中完成所有操作，其中所需要的只是将六个图像放在另一个图像的顶部。)

  ask by rrichter translate from so

Answer 1

Ok, after some time, here's what I landed on:

(好的，过了一段时间，这是我登陆的：)

 .parent { position: relative; top: 0; left: 0; } .image1 { position: relative; top: 0; left: 0; } .image2 { position: absolute; top: 30px; left: 70px; } 

 <div class="parent"> <img class="image1" src="https://placehold.it/50" /> <img class="image2" src="https://placehold.it/100" /> </div> 

As the simplest solution.

(作为最简单的解决方案。)

That is:

(那是：)

Create a relative div that is placed in the flow of the page;

(创建放置在页面流中的相对div;)

place the base image first as relative so that the div knows how big it should be;

(首先将基本图像作为相对图像放置，以便div知道它应该有多大;)

place the overlays as absolutes relative to the upper left of the first image.

(将叠加层设置为相对于第一个图像左上角的绝对值。)

The trick is to get the relatives and absolutes correct.

(诀窍是让亲戚和绝对正确。)