I have a collection of images that I am trying to stack using negative margins. However, because stacking them without defined boundaries can lead to visual confusion, I thought about adding borders around each image. Surprisingly, while the images are stacking correctly, their borders end up appearing beneath the preceding element.
Why is this happening and is there a solution to make the borders display at the correct level?
#second {
margin-top: -50px;
margin-left: 20px;
}
img {
border: 5px ridge green;
display: block;
}
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"><img id="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto"></div>
UPDATE: The issue looks like this on Firefox: https://i.sstatic.net/bCawq.png