爲什麼相對定位會改變我的頁面順序？

我有一個奇怪的問題，我的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 ...您的導航出現在它會出現的地方將出現如果該屬性不存在。它從窗口頂部的標題高度向下移動。如果你也想下推導航，你也可以添加一個top: 200px，但這隻會導致每個其他元素需要相對定位200像素的問題，從它最初出現的位置開始，這不是很好邏輯。

Relative positioning