Strange behavior with position fixed

Question

Here is a codepen with what I mean: https://codepen.io/anon/pen/MReEQw, and the code bellow:

<div id="fixed">
</div>

<div id="content">
</div>


#fixed {
    height: 50px;
    width: 100%;
    background-color: green;
    position: fixed;
}

#content {
    height: 2000px;
    background: grey;
    margin-top: 50px;
}

Is this margin-collapse? Why can't I set a fixed div, and then set a div underneath it that doesn't overlap?

Answer 1

If you want div #fixed to be at top then add this property

#fixed {
    height: 50px;
    width: 100%;
    background-color: green;
    position: fixed;
    top: 0;
}