如何让 HTML 图像重叠另一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5182170/
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 to let an HTML image overlap another
提问by zomb
<div class="mainRunner">
<img src="../App_Themes/Default/images/a.gif" />
<img src="../App_Themes/Default/images/b.gif" />
</div>
I want b.gif to overlap a.gif rather than go on a new line - how can I achieve this?
我希望 b.gif 与 a.gif 重叠而不是另起一行 - 我怎样才能做到这一点？
回答by Kyle
You would have to use positioning and z-index to get this to work, with changing the images to block level elements and adding a class:
您必须使用定位和 z-index 来使其工作，将图像更改为块级元素并添加一个类：
.mainRunner {
border: 1px solid #000;
position: relative;
}
.img1 {
border: 1px solid #f00;
position: relative;
z-index: 2;
}
.img2 {
border: 1px solid #0f0;
position: relative;
z-index: 1;
top: -12px;
left: 12px;
}<div class="mainRunner">
<img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
<img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>回答by Desi
Make sure the the containing element (wrapping div) has relative positioning applied.
确保包含元素（包装 div）应用了相对定位。
div.mainRunner { position:relative;}
After this you can do one of the following.
在此之后，您可以执行以下操作之一。
Apply a class name to each image so you can map to it with absolute positioning.
div.mainRunner img.classname { position:absolute; top:__; left:__;}
将类名应用于每个图像，以便您可以使用绝对定位映射到它。
div.mainRunner img.classname { position:absolute; top:__; left:__;}
Lastly apply z-index to the image class.
最后将 z-index 应用于图像类。
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:50;}
And for the second image;
对于第二张图片；
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}
If you have no control over applying classes to the images then do this (on the assumption that only 2 images will be in this div;
如果您无法控制将类应用于图像，则执行此操作（假设此 div 中只有 2 个图像；
div.mainRunner img.classname:first-child { position:absolute; top:__; left:__; z-index:50;}
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}
回答by FreeAsInBeer
You could use absolute positioning (please don't), or negative margins with display:inline.
您可以使用绝对定位（请不要）或负边距display:inline。
