边距和负边距

我一直以为我理解边距和负边距，但显然我不明白！我刚刚开始新的设计，但已经遇到了问题。

我有一个 div (hill3Cont) 和另一个 div (hill3Hill) 嵌套在里面，这是它们的 CSS。

#hill3Cont
{
    width: 100%;
    background-image: url("images/grass.jpg");
}
#hill3Hill 
{
    margin: -100px 0 0 0;
    height: 600px;
    width: 100%;
    background: url("images/hill3.png") no-repeat center top;
}

我在子 div 的顶部应用了负边距，希望它能将这些内容推到父 div 的边界之外。但它没有，它一动不动。如果我应用正边距，它会将父 div 及其内部的子 div 向下推。

我可以使其正常运行的唯一方法是使用隐藏在父 div 上的边框或溢出，但设计不允许使用其中任何一种（我不希望边框和溢出隐藏隐藏子项）。

也许这只是漫长的一天，我错过了一些常见的事情！提前谢谢了。

编辑： 我有一个解决方案，我在父 div 上放置了一个填充顶部，填充：1px 0 0 0。它适合我的设计，所以我很高兴，但仍然热衷于找出发生了什么。

对于父元素内的子元素，请使用相对位置和负顶部。

http://jsfiddle.net/GEwj3/3/ http://jsfiddle.net/GEwj3/3/

#hill3Cont
{
    margin-top: 50px;
    width: 200px;
    height: 200px;
    background-color: red;
}
#hill3Hill 
{
    height: 50px;
    width: 100px;
    background: blue;
    position: relative;
    top: -20px;
}