html - margin 和负 margin

Question

我一直以为我了解利润率和负利润率，但显然我不了解!我刚刚开始一个新的设计并且已经遇到了问题。

我有一个 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 上的边框或溢出，但设计不允许这两种情况(我不想要边框和隐藏的溢出隐藏 child ) .

也许只是漫长的一天，我错过了一些共同点!非常感谢。

编辑: 我有一个解决方案，我在父 div 上放置了一个 padding top，padding: 1px 0 0 0。它适用于我的设计，所以我很高兴，但仍然想知道发生了什么。

Answer 1

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

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;
}