How to lay an image over an image in table cell - css

Question

I'm trying to lay an image on top of an image in a table cell (if you click on it).
<table>
<tr>
<td style="background-color:Gray;"><a id="firstcell" onclick="addImage"><img scr="snowman.png"></a></td>
</tr>
...
</table>
Here is the addImage function:
function showMoves(fig_name,pos) {
var image = document.createElement("img");
var imageParent = document.getElementById("firstcell");
image.src = "circle.png";
image.style.position = "absolute";
imageParent.appendChild(image);
}
I tried it with absolute position, but it is on the right side of the table cell and not directly on top.
I clicked on the Lightgray cell and it place it over the gray one.
The important thing is to add the circle with a function that is executed when you click on the snowman and the circle has to be above. Or is there a different way to mark cells in a table?

Answer 1

It's much easier to assign a class to the image and then style that class as per the code below:
window.onload = () => {
document.getElementById('firstcell').addEventListener('click',addImage); //I've moved this from the 'onclick' attribute in your html to the window.onload event. It's better practice.
}
function addImage() {
var image = document.createElement("img");
var imageParent = document.getElementById("firstcell");
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAAAAABVicqIAAAALHRFWHRDcmVhdGlvbiBUaW1lAFdlZCAyNSBKYW4gMjAyMyAxNzozMTozNyAtMDAwMLY8BBsAAAAHdElNRQfnARkRICUUgImdAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGPC/xhBQAAAAJ0Uk5TAP9bkSK1AAAB3ElEQVR42u2a0Q7DIAhFhf//5y5L1lUUFZTrtmY8LJmKx0trq1I6ksfo+eNzeXqZPUj+9ZBsENKLraAxhPrVFtAIogWpxI7H2WtB/X4G1SaIoQ8jpgmx+luatSBkioMEtQUfU26+IakQjwzLqDSInzFwqiHeUBkoFWRKxsCzhMwz3s61bwFpNVujsNJ0mvHyrB6pEjL3ThpSBGSZ0aDkELL3NaJ0lKwLSeorJ4MEBKtBuSAhwdKDwYP6acvHzKIwiFF2w73KKClcF8VL4XbVKuUaN8sKjL0gsdEqpfBCR04l4UI0yCkw2M6xw8KVj5m1wmjjXBZKCtdFgUYSArVtEPAsgSshNOS6l2514Slh5/vNwvWHuCBy+fLLSn4aoq4gEXa8IdhnCl7JByCYiXJkEMhFUXZa0DkPuybq7hch5bwMLP6BbOctHC5FrE7KAxykkmiKXGZh9iedk7vYgCk7LT3HEyOkvIUxJ2uIfXzvXDgqYPXxHKtNYhnx513aIOvjwTUpakpAhmuZoqcduNkyjvGRJM2edNOexNmsGF8KcIriT2buScs6xUwmmFM+WXCpcpv/atJf9lH106lyQpLtEbP2IYYFE/FJSRcU93FMAxT/mc+i3W/3+4d8D+QBTk2Hi2UsNw8AAAAASUVORK5CYII="; //this is just a png of a circle encoded in to base 64 so it'll work on this site
image.className = "overlay"; //rather than using inline styles, just set the classname to overlay and then you can use as much css as you like to get the effect you want.
imageParent.appendChild(image);
}
img {
display: block; /* remove that annoying space at the bottom of inline items */
}
td {
position: relative; /* this creates a new containing block so we can position the overlay image relative to the table cell */
}
.overlay {
position: absolute;
left: 3px; /* 3px from the left of the table cell and... */
top:5px; /* 5px from the left of the table cell and... */
}
<table>
<tr>
<td style="background-color:Gray;"><a id="firstcell"><img src="https://picsum.photos/id/64/100/100"></a></td>
</tr>
</table>