Html 将 2 张图像放在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25393877/
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
Put 2 images on top of each other
提问by Matt
I'm currently making a Cluedo-esque style of website where people can suspect people or declare them innocent. When I person is innocent, I want to put a red cross over their pictures.
我目前正在制作一个 Cluedo 风格的网站，人们可以在其中怀疑他人或宣布他们无罪。当我一个人是无辜的，我想在他们的照片上画一个红十字。
But currently I'm struggling to position everything. I've managed to put 2 images over each other, but not on the correct position.
但目前我正在努力定位一切。我设法将 2 张图像相互重叠，但没有放在正确的位置。
Current situation: A table with pictures in the first row. This is the CSS added to the pictures:
当前情况：第一行有图片的表格。这是添加到图片中的 CSS：
<td><img src="bottom.jpg" style="z-index: 0; position: absolute" />
<img src="top.png" style="z-index: 1; position: absolute"/>
</td>
How can I the position of both of my images? Removing the "position: absolute" doesn't work, so how can I fix this and still keep both of the pictures in the table cell.
我怎样才能定位我的两个图像的位置？删除“位置：绝对”不起作用，那么我该如何解决这个问题并仍然将两张图片保留在表格单元格中。
The solution should work for all the pictures in the table (a general CSS class for each of the pictures (top/bottom).
该解决方案应该适用于表格中的所有图片（每个图片（顶部/底部）的通用 CSS 类）。
Thanks!
谢谢！
EDIT after Fabio's suggestion
在法比奥的建议后编辑
It solved a part of the issue, but not entirely. This is the current situation with the exact code you suggested:
它解决了部分问题，但不是全部。这是您建议的确切代码的当前情况：
回答by Hashem Qolami
You should wrap the images by an additional <div>in order to use relative positioning. Because the effect of position: relative;on table-cell elements is undefined.
您应该通过附加包装图像<div>以使用相对定位。因为position: relative;对表格单元格元素的影响是未定义的。
9.3.1 Choosing a positioning scheme: 'position' property
The effect of
position:relativeontable-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell, andtable-captionelements is undefined.
的效果
position:relative上table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell，和table-caption元件是未定义。
<td>
<div class="img-container">
<img class="top" src="http://lorempixel.com/200/150" alt="">
<img class="bottom" src="http://placehold.it/200x150/fe0" alt="">
</div>
</td>
Then you could simply remove the .topimage from document normal flow an place that over the other one as follows:
然后，您可以简单地.top从文档正常流中删除图像，如下所示：
CSS
CSS
.img-container { position: relative; }
.img-container .top {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
PS: I've added a transition of opacityproperty in the online demo to hide .topimages on mouse over.
PS：我opacity在在线演示中添加了一个属性转换来隐藏.top鼠标悬停时的图像。
回答by Devin
First of all remove your inline styles. If possible give classes to images, like this:
首先删除您的内联样式。如果可能，请为图像提供类，如下所示：
<td><img class="bottomimg" src="bottom.jpg" />
<img class="topimg" src="top.png" />
</td>
then in CSS
然后在 CSS
td{position:relative; z-index:0}
.bottomimg{position:absolute; top:0; left:0; z-index:1}
.topimg{position:absolute; top:0; left:0; z-index:2}
