Position:Fixed; is not breaking off the document flow? - css-position

Question

The green nav bar behind the parent element is positioned as fixed .
And the fixed elements are suppose to break out from the document flow .
But when I am assigning position:fixed; [withot any top,left,right,bottom], then it should be starting from the top-left pixel of screen.
But no it is starting from a very odd position [it's taking margin-top:100px]
[why it is not breaking off from document flow]
Yes parent block [block not element] is having margin of 100px [all sides] Then also
first -> it[green nav] should not care about margins because it should not be in document flow.
Second -> even if its considering the margin from top [of another element], then why it is not considering margin from the left ?
CSS For the Green nav Block -
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
}
position fixed is not breaking out of document flow
as it is considering margin-top of the parent element! When
positioned as relative working expected [within document flow]
CSS for Another block parent whose margin the above navbar is taking -
div.parent{
margin: 100px;
height: 400px;
width: 400px;
border: 3px solid red;
background-color: skyblue;
position: relative;
}
Green Navbar with position fixed, not breaking off document flow
Green Navbar with position relative, staying in document flow as expected
So the real question is why the navbar is not starting from top,left most corner ?

Answer 1

Try this css for stick green navbar on top
div.nav{
background-color: green;
text-align: center;
height: auto;
width: 50%;
margin:0 auto;
position: fixed;
top:0px;
left:50%;
transform:translateX(-50%);
}