Question

I am a beginning web developer and I want to overlap two images completely on top of one another. I am developing an application that checks to see if an answer inputed into the application is correct or not. For each answer, I will either display a checkmark or an “X” mark for the correct/incorrect answers respectively. To do this, I will use CSS and JavaScript:

CSS:

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

JavaScript:

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

To do this, I just want to make the checkmark visible so that it covers up the xmark completely. What is the simplest way to overlay the images completely one on top of the either so that the checkmark covers the “X” mark?

Answer 1

How to make images overlap:

.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>

This will make the images overlap.

Zindex controls which image is on top.

Alternatively, you could also use display:none; and display:block; in your js or even change the z-index.

If you use display you wont need to overlap anything.