为什么相对定位会改变我的页面顺序？

我有一个奇怪的问题，我的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