css - 不移动父容器的 CSS 负边距

Question

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

感谢您的任何想法！

Answer 1

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

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

这是有效的，因为立即相互对比的边距组合成一个边距。

Answer 2

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

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

Answer 3

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

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

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