Css 负边距和边框

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

为什么我会有这样的行为，有没有办法让边界以直观的方式出现

#秒{
利润上限：-50px；
左边距：20px；
}
img{
边框：5px脊绿色；
显示：块；
}

---

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

#秒{
利润上限：-50px；
左边距：20px；
}
img{
边框：5px脊绿色；
显示：块；
位置：相对位置；
}

---

您也可以在FF中使用transform强制绘制边框：

#秒{
利润上限：-50px；
左边距：20px；
}
img{
边框：5px脊绿色；
显示：块；
}
/*FF调试*/
div+div img{
变换：缩放（1）；/*transform+anyvalue不执行任何新操作，将强制重新绘制布局*/
}
div{float：左；
边距：1em；

在Chrome上，第二个图像与第一个图像的边框重叠。您使用的浏览器是什么？编辑：在Internet Explorer 11上，它不工作。在Chrome上，它看起来不错，但Firefox显示了问题。是的，它是Firefox。在Firefox中发布一张问题图片，以确保重叠可能会建议使用

z-index

@DaniP-对于一些可能需要的情况，但在这里似乎没有必要。同意只是想指出，如果需要更多的img参与，这是一个选项