将完全相同大小的图像重叠在另一个图像上

Question

我是一名初级Web开发人员，我希望将两个图像完全叠加在一起。我正在开发一个应用程序，检查应用程序中输入的答案是否正确。对于每个答案，我将分别为正确/不正确的答案显示复选标记或“X”标记。为此，我将使用CSS和JavaScript：

CSS：

#checkmark { visibility: hidden}
#xmark {visibility:visible}

JavaScript的：

function showCorrect(input, ans) {
    if (input == ans) {
        document.getElementById('checkmark').style.visibility=visible;
    }
}

要做到这一点，我只想使复选标记可见，以便它完全覆盖xmark。将图像完全叠加在一个上面的最简单方法是什么，以便勾选标记覆盖“X”标记？

Answer 1

如何使图像重叠：

.imagewrapper {
position:relative;}

.imagewrapper img {
position:absolute;
top:0px;
left:0px;
}

.img1 {
z-index:1
}
.img2 {
z-index:2;
}

HTML

<div class="imagewrapper">
<img class="img1" src="img1.jpg" />
<img class="img2" src="img2.jpg" />
</div>

这会使图像重叠。

Zindex控制哪个图像位于顶部。

或者，您也可以使用display：none;和显示：块;在你的js甚至改变z-index。

如果使用显示器，则无需重叠任何内容。