.header固定定位后，.banner的设置

.header固定定位后会覆盖其他未设置定位的元素，为了完整显示.banner的内容，可以设置padding-top，但是为何设置.banner的margin-top：50px后，.header也跟随显示margin-top属性？

.header{
    width: 100%;height: 50px;background-color: #333;
    margin:0 auto;/*水平居中*/
    line-height: 50px;/*垂直居中-单行文本*/
    position: fixed;/*固定定位*/
}
.banner{
    width: 800px;height: 300px;background-color: #30a457;
    margin: 0 auto;
    /*防止内容被header覆盖*/
    margin-top: 50px;
    /*padding-top: 50px;*/
    position: relative;
}