Html 我们如何使用 css 样式重叠两个图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1782601/
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 can we overlap two images using css style?
提问by random
I have a list of images in an html table and need to overlap a small icon on each image. How can we do this using z index and positioning?
我在 html 表中有一个图像列表，需要在每个图像上重叠一个小图标。我们如何使用 z 索引和定位来做到这一点？
回答by Jitendra Vyas
.under {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.over {
position: absolute;
left: 40px;
top: 10px;
z-index: -1;
}<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
<img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />回答by zeckdude
The element you want to be on top needs to have a higher z-index
您想要位于顶部的元素需要具有更高的 z-index
So the small icon would have a z-index of 2 and the images would have a z-index of 1
所以小图标的 z-index 为 2，图像的 z-index 为 1
Example:
例子：
.icon {
z-index: 2;
position: relative;
left: 30px;
top: 30px;
}
.images {
z-index: 1;
}
回答by ntheitroadenex
You could use position:relativeand set right:30px, bottom:30px, that would shift it up and left by 30 pixels.
您可以使用position:relative并设置right:30px, bottom:30px，将其向上和向左移动 30 个像素。
CSS:
CSS：
.icon{
position:relative;
right:30px;
bottom:30px;
}
回答by Daniel
Here is an guide about you can use z-index and here https://developer.mozilla.org/en/understanding_css_z-index
这是关于您可以使用 z-index 的指南，这里是 https://developer.mozilla.org/en/understanding_css_z-index
an article about positioning http://www.tizag.com/cssT/position.php
一篇关于定位的文章 http://www.tizag.com/cssT/position.php
