【问题标题】: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

感谢您的任何想法!

【问题讨论】:

标签: 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 步。许多其他网站也有关于此属性的更多信息。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-05-14
    • 2011-04-04
    • 2012-06-21
    • 2022-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多