Html 在另一张图像上定位和叠加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5130374/
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
Positioning and overlaying image on another image
提问by keruilin
See how the tiny Facebook icon is positioned in the lower right-hand corner over another image?
看看 Facebook 的小图标如何放置在另一张图片的右下角？
How can I do that using a combo of HTML/CSS/Rails/Prototype!? An example would be great. Perhaps in jsfiddle.net.
我如何使用 HTML/CSS/Rails/Prototype 的组合来做到这一点！？一个例子会很棒。也许在 jsfiddle.net 中。
采纳答案by zdyn
Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/
这是一个使用 div 而不是图像的简单示例：http: //jsfiddle.net/sqJtr/
Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absoluteand position it however you want using bottomand right.
基本上，您将两个图像放在同一个容器中。给容器一个非静态的位置（在我的例子中，相对）。然后给出叠加图像position: absolute并根据需要使用bottom和定位它right。
回答by Sameer Goyal
You can use css to solve the problem.
你可以使用css来解决这个问题。
div {
position: relative;
display: inline;
}
.imtip {
position: absolute;
bottom: 0;
right: 0;
}<div>
<img src="http://i.stack.imgur.com/Blaly.png" />
<img src="http://www.w3schools.com/favicon.ico" class="imtip" />
</div>Basically, I've done more or less what ZDYN said, just that you need to include a display: inlinein the container otherwise the container divspans the whole width.
基本上，我或多或少地做了 ZDYN 所说的，只是你需要display: inline在容器中包含 a否则容器div跨越整个宽度。
回答by Hussein
Here you go. This is done using 2 images.
干得好。这是使用 2 张图像完成的。
<div class="parent">
<img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
<div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
</div>
.parent{
width:200px;
height:200px;
position:absolute;
z-index:0;
}
.inner{
position:absolute;
z-index:1;
bottom:0;
right:0;
}
Check working example at http://jsfiddle.net/WPWzq/
在http://jsfiddle.net/WPWzq/检查工作示例
回答by jeroen
See my answer to this question.
The difference with your situation is that you don′t need any javascript if you don′t want to, you can just add divs to the html and position them absolutely on top of the photos.
与您的情况不同的是，如果您不想，您不需要任何 javascript，您只需将 div 添加到 html 并将它们绝对放置在照片的顶部。
I think I would personally add the divs using javascript anyway so that they don′t clutter the html.
我想我会亲自使用 javascript 添加 div，这样它们就不会弄乱 html。
