html - Margin-top 不适用于 div

Question

我很困惑为什么 margin-top 不起作用。这是我的代码:

HTML:

<div class="container-extended-blog">
    <div class="offers-for-week">
        <h1 class="title offers-for-this-week">offers for this week</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        <img src="img/extended_blog_pic.jpg" alt="image of recipe">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div><!-- /.offers-for-week -->
</div><!-- /.container-extended-blog -->

SCSS:

.container-extended-blog {
    margin-top: 200px;
    margin-left: 300px;
    background-color: $blue-ot;
    width: 350px; 
    height: 450px;
    overflow: hidden;
    p {
        font-family: $content-font;
        color: $icon-font-color;
    }
}

我已经尝试添加 position: relative; 我发现每当发生这种情况时它通常都有效，但是我不知道为什么这不起作用，并且真的很想了解!

Answer 1

将 position:absolute; 添加到 .container-extended-blog

.container-extended-blog {
top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px; 
height: 450px;
overflow: hidden;
position:absolute;
}

或

将 top: 200px; 更改为 margin-top: 200px;

.container-extended-blog {
margin-top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px; 
height: 450px;
overflow: hidden;
}

参见 fiddle :http://jsfiddle.net/Q5xdf/