负边距和边框

Question

我有一些图像想要使用负边距进行堆叠。然而，由于堆叠没有明确定义边界的图像可能会在视觉上造成混乱，因此我认为应该在它们周围添加边框。奇怪的是，即使图像正确堆叠，它们的边框最终会位于前一个元素的下方。

为什么这是我得到的行为，有没有办法让边框以其直观的水平出现？

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

编辑：在 Firefox 上，它看起来像这样：

Answer 1

该问题不会出现在 Chrome 中，但会出现在 Firefox 和 IE 中。简单的解决方案似乎只是将图像的位置设置为相对位置：

#second {
  margin-top: -50px;
  margin-left: 20px;
}

img {
  border: 5px ridge green;
  display: block;
  position: relative;
}

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