css相对定位的令人十分疑惑的难题。。。

position:relative;很多教材啊，资料啊都说相对父级元素定位但是事实似乎不是这样比如
<html>
<style>
#wrapper{width:500px;height:300px;background:#f4f4f4}
#menu{width:500px;height:100px;background:#e1f7d8}
</style>
<body>
<div id="wrapper">
   <div id="menu">
      Test1
   </div>
   <div style="position:relative;left:100px;top:100px;height:100px;background:#019ffe">Test2</div>
</div>
</body>
</html>明显是根据同级的上级元素来定位的吗，，大家有和解释？？附图看的更清楚些

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。
relative是相对于自己来定位的
本来就不是相对父级元素定位，而是相对该元素正常位置的偏移，比如你设定
position:relative;left:100px;top:100px;
是让该元素相对它本来的位置向右和向下个偏移100px