相対的な位置付けがページの順序を変更するのはなぜですか？

私はHTMLとCSSのコードで奇妙な問題があります：彼らは両方とも比較的配置されているとき相対的な位置付けがページの順序を変更するのはなぜですか？

<header> 
    <h1>title</h1> 
</header> 
<nav> 
    <a href="">menu 1</a> 
    <a href="">menu 1</a> 
    <a href="">menu 1</a> 
    <a href="">menu 1</a> 
</nav>

header { 
    margin: 0 auto; 
    position: relative; 
    top: 200px; 
    width: 200px; 
} 
header h1 { 
    font-size: 24px; 
    text-align: center; 
} 
nav { 
    clear: both; 
    margin: 0 auto; 
    position: relative; 
    width: 200px; 
} 
* { 
    border: none; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { 
    display: block; 
} 
body, html { 
    height: 100%; 
}

はなぜ<nav>は<header>の上に表示されていますか？

See the jsFiddle.

出典

2012-04-06 cssnoob

これではなく、ヘッダーをナビゲーションの下に移動したばかりです。 top: 200pxを指定しました。を 200px下に移動しました。あなたのナビは場所に表示されます。は、そのプロパティが存在しない場合はと表示されます。ヘッダーの高さをウィンドウの上から下に移動します。また、navを押し下げたい場合はtop: 200pxを追加することもできますが、最初に表示された場所の上から相対的に200ピクセル離れた場所に配置する必要があります論理的。

Relative positioning