负边距和边界

codebreaker 发表于 Dev

密码破解者

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

为什么这是我要得到的行为，并且有一种方法可以使边框显示在其直观的水平上？

#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上，这是这样的：

j08691

该问题不会在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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。