如何在 HTML 中将一个图像放置在另一个图像的顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I position one image on top of another in HTML?
提问by rrichter
I'm a beginner at rails programming, attempting to show many images on a page. 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.
我是 Rails 编程的初学者，试图在页面上显示许多图像。有些图像要放在其他图像之上。为了简单起见，假设我想要一个蓝色方块，在蓝色方块的右上角有一个红色方块（但在角落处不紧）。由于性能问题，我试图避免合成（使用 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.
作为一个更困难的例子，想象一个里程表放置在一个更大的图像中。对于六位数字，我需要合成一百万张不同的图像，或者即时完成所有操作，只需将六个图像放在另一个图像的顶部。
回答by rrichter
Ok, after some time, here's what I landed on:
好的，过了一段时间，这就是我登陆的地方：
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
border: 1px red solid;
}
.image2 {
position: absolute;
top: 30px;
left: 30px;
border: 1px green solid;
}<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; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.
创建一个放置在页面流中的相对div；将基本图像首先作为相对位置放置，以便 div 知道它应该有多大；将叠加放置为相对于第一张图像左上角的绝对值。诀窍是让亲戚和绝对正确。
回答by Espo
This is a barebones look at what I've done to float one image over another.
这是对我为将一个图像浮动到另一个图像所做的工作的准系统。
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">回答by buti-oxa
Here's code that may give you 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>
I suspect that Espo's solutionmay be inconvenient because it requires you to position both images absolutely. You may want the first one to position itself in the flow.
我怀疑Espo 的解决方案可能不方便，因为它要求您绝对定位两个图像。您可能希望第一个在流中定位自己。
Usually, there is a natural way to do that is CSS. You put position: relative on the container element, and then absolutely position children inside it. Unfortunately, you cannot put one image inside another. That's why I needed container div. Notice that I made it a float to make it autofit to its contents. Making it display: inline-block should theoretically work as well, but browser support is poor there.
通常，有一种自然的方法可以做到这一点，那就是 CSS。您将 position: relative 放在容器元素上，然后将子元素绝对定位在其中。不幸的是，您不能将一个图像放入另一个图像中。这就是我需要容器 div 的原因。请注意，我将其设为浮动以使其自动适应其内容。让它显示： inline-block 理论上应该也能工作，但浏览器支持很差。
EDIT: I deleted size attributes from the images to illustrate my point better. If you want the container image to have its default sizes and you don't know the size beforehand, you cannot use the background trick. If you do, it is a better way to go.
编辑：我从图像中删除了尺寸属性以更好地说明我的观点。如果您希望容器图像具有其默认大小并且您事先不知道大小，则不能使用背景技巧。如果你这样做，这是一个更好的方法。
回答by Wez
One issue I noticed that could cause errors is that in rrichter's answer, the code below:
我注意到可能导致错误的一个问题是，在 rrichter 的回答中，代码如下：
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
should include the px units within the style eg.
应该在样式中包含 px 单位，例如。
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
Other than that, the answer worked fine. Thanks.
除此之外，答案工作正常。谢谢。
回答by Danield
You can absolutely position pseudo elementsrelative to their parent element.
您可以pseudo elements相对于其父元素进行绝对定位。
This gives you two extra layers to play with for every element - so positioning one image on top of another becomes easy - with minimal and semantic markup (no empty divs etc).
这为每个元素提供了两个额外的层 - 因此将一个图像定位在另一个之上变得容易 - 使用最少的语义标记（没有空的 div 等）。
markup:
标记：
<div class="overlap"></div>
css:
css：
.overlap
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.overlap:after
{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background-color: red;
}
Here's a LIVE DEMO
这是现场演示
回答by FlySwat
Inline style only for clarity here. Use a real CSS stylesheet.
内联样式只是为了清楚起见。使用真正的 CSS 样式表。
<!-- First, your background image is a DIV with a background
image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
<!-- Second, create a placeholder div to assist in positioning
the other images. This is relative to the background div. -->
<div style="position: relative; left: 0; top: 0;">
<!-- Now you can place your IMG tags, and position them relative
to the container we just made -->
<img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
</div>
</div>
回答by Chris Bartow
The easy way to do it is to use background-image then just put an <img> in that element.
最简单的方法是使用 background-image 然后在该元素中放置一个 <img> 。
The other way to do is using css layers. There is a ton a resources available to help you with this, just search for css layers.
另一种方法是使用 css 层。有大量资源可以帮助您解决这个问题，只需搜索css layers。
回答by Elkin Angulo
It may be a little late but for this you can do:
可能有点晚了，但为此你可以这样做：
HTML
HTML
<!-- html -->
<div class="images-wrapper">
<img src="images/1" alt="image 1" />
<img src="images/2" alt="image 2" />
<img src="images/3" alt="image 3" />
<img src="images/4" alt="image 4" />
</div>
SASS
SASS
// In _extra.scss
$maxImagesNumber: 5;
.images-wrapper {
img {
position: absolute;
padding: 5px;
border: solid black 1px;
}
@for $i from $maxImagesNumber through 1 {
:nth-child(#{ $i }) {
z-index: #{ $maxImagesNumber - ($i - 1) };
left: #{ ($i - 1) * 30 }px;
}
}
}
回答by Pallavi Singh
Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.
创建一个放置在页面流中的相对div；将基本图像首先作为相对位置放置，以便 div 知道它应该有多大；将叠加放置为相对于第一张图像左上角的绝对值。诀窍是让亲戚和绝对正确。
回答by S?ren Kuklau
@buti-oxa: Not to be pedantic, but your code is invalid. The HTML widthand heightattributes do not allow for units; you're likely thinking of the CSS width:and height:properties. You should also provide a content-type (text/css; see Espo's code) with the <style>tag.
@buti-oxa：不要学究气，但您的代码无效。HTMLwidth和height属性不允许使用单位；您可能会想到 CSSwidth:和height:属性。您还应该提供text/css带有<style>标签的内容类型（；请参阅 Espo 的代码）。
<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>
Leaving px;in the widthand heightattributes might cause a rendering engine to balk.
离开px;中width和height属性可能导致的渲染引擎在所不惜。
