不移动父容器的 CSS 负边距答案

【问题标题】：CSS Margin Negative without Moving Parent Container不移动父容器的 CSS 负边距
【发布时间】：2010-07-10 00:12:52
【问题描述】：

我正在尝试在此页面 (http://musicaladvocacy.org/) 上显示“主页”的区域（灰色渐变中的白色容器）向上移动约 60 像素，但正如您所看到的那样as 向上移动父容器。我只是想让白框向上移动而不是整个东西。所以它应该是这样的：http://musicaladvocacy.org/index-margin.jpg

感谢您的任何想法！

【问题讨论】：

关于负面定位的更多信息，请查看这篇文章：smashingmagazine.com/2009/07/27/…

标签： css overlay margin layer

【解决方案1】：

您还可以在父级顶部添加 1px 内边距，并继续使用负边距。

.width { padding-top: 1px; }
.content { margin-top: -60px; }

之所以有效，是因为彼此紧挨着的边距合并为一个边距。

【讨论】：

顶部内边距如何再次使边距塌陷？
如果 padding 为 0，则边距紧邻。紧邻的边距塌陷。如果 padding 至少为 1px，则父外边距和子外边距是分开的，它们不会塌陷。
如果可以的话+100。花了一个小时弄乱相对定位。终于放弃了，开始写一个问题，这个问题出现在“可能已经有你答案的问题”框中。谢谢

【解决方案2】：

您可以在需要上移的元素上应用position:relative; top:-60px;。

#el {
   position:relative;
   top:-60px;
   z-index: 5;
}

【讨论】：

+1 实际上...我认为这非常理想。负边距不会破坏页面的流动，因此尝试使用它们总是会推动其他元素。这种布局场景正是相对定位的好处。
哇，我们真的每天都在学习，不知道你可以在相关元素上使用 top 属性！
在我的例子中，用“top”替换“margin-top”直到我看到“top”在底部添加了一个边距。所以，有时，使用 top 你会解决一个问题并得到另一个问题。
请注意，此方法确实移动了元素，但它占用的原始空间仍然存在，留下了您可能不想要的间隙。见developer.mozilla.org/en-US/docs/Web/CSS/position

【解决方案3】：

您正在搜索的是 CSS 属性“位置”和“顶部”。

#div-1 {
  position:relative;
  top:-60px;
}

请参阅this guide 的第 2 步。许多其他网站也有关于此属性的更多信息。

【讨论】：