利润率和负利润率

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上的边框或溢出,但设计将不允许这些中的任何一个(我不希望隐藏边框和溢出隐藏子项).

也许这只是漫长的一天,我错过了一些常见的东西!提前谢谢了.

编辑:我有一个解决方案,我在父div上放了一个填充顶部,填充: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;
}