负边距和边框答案

【问题标题】：Negative margins and borders负边距和边框
【发布时间】：2016-06-23 04:27:39
【问题描述】：

我有一些图像想要使用负边距堆叠。然而，由于没有明确定义的边界堆叠图像可能会在视觉上令人困惑，我想我应该在它们周围添加一个边框。奇怪的是，即使图像正确堆叠，它们的边框最终也会位于前一个元素的下方。

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

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

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

&lt;div&gt;&lt;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"&gt;&lt;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"&gt;&lt;/div&gt;

编辑：在 Firefox 上，它是这样的：

【问题讨论】：

在 Chrome 上，第二张图片与第一张图片的边框重叠。你使用的是什么浏览器？编辑：在 Internet Explorer 11 上它不起作用。
在 Chrome 上看起来不错，但 Firefox 显示问题。
是的，它是 Firefox。
在Firefox中发布问题图片

标签： css cross-browser margin

【解决方案1】：

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

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

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

/* FF debug*/
div + div img {
  transform:scale(1);/* transform + anyvalue that does nothing new forces the layout to be redrawn */
}
div {float:left;
  margin:1em;

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

【讨论】：

【解决方案2】：

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

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

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

&lt;div&gt;&lt;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"&gt;&lt;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"&gt;&lt;/div&gt;

【讨论】：

另外为了保证重叠可能会建议使用z-index
@DaniP - 对于某些可能需要但在这里看起来没有必要的情况。
同意只是想指出如果涉及更多 img 的选项