没有移动父容器的CSS保证金负数

Question

我试图在这个页面（http://musicaladvocacy.org/）上显示“Home”（灰色渐变中的白色容器）的区域大约60 px，但正如您所看到的那样以及移动父容器。我只是希望白盒子向上移动而不是整个东西。所以它应该是这样的：http://musicaladvocacy.org/index-margin.jpg

感谢您的任何想法！

Answer 1

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

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

Answer 2

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

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

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

Answer 3

您要搜索的是css属性“position”和“top”。

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

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