菜鸟学习CSS定位position属性值absolute问题，不懂具体是相对于那里移动

<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:white}
.box{
    background-color:gray;
    width:100px;
    height:100px;
    color:black;
}
#static{
    position:static;
}
#relative{
    position:relative;
    background-color:yellow;
    top:20px;
    left:10px;
    z-index:1;
}
#absolute{
    position:absolute;
    background-color:blue;
    top:40px;
    left:40px;
}
#fixed{
    position:fixed;
    background-color:red;
    top:0;
    left:120px;
    z-index:-1;
}
</style>
</head>
    <body>
        <div class="box" id="static">static</div>
        <!-- 相对于文档中的原始位置移动，这个懂 -->
        <div class="box" id="relative">relative</div>
        <!-- 效果看来是相对于原始框body定位，不知道为什么不相对于relative移动，relative不是最近的父元素，还有原始body框也没有规定position的值啊 搞不懂这几个属性值的计算方法 -->
        <div class="box" id="absolute">absolute</div>
        <div class="box" id="fixed">fixed</div>
    </body>
</html>

图片说明

可以参考这个 http://blog.csdn.net/cyyax/article/details/50607066

最近的有relative的父级元素。不行就继续找‘父级元素’的父级元素

static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 TRBL 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位) 脱离文档流，通过TRBL定位. 使用absolute绝对定位时,冒泡最近的带有absolute/relative的父级，如没有则冒泡至body的TRBL为止，可z-index进行层次分级。

fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

子绝父相，子元素为absolute的话他是由最近那个relative来定往哪里移，怎么算最近呢？就是他的父级，那个最近的有相对定位就以哪个为准。
如果你全部都没有相对定位的话只有绝对定位的话那就是以body为移动的

一般就设置一个relative，然后在这个div里面设置一个absolute，

已解决，另外在这个例子中的absolute是无父级元素的情况，但是这时候移动的参照标准不是body而是html，具体原因我也不知道，是通过测试得知，有哪位大神知道可以告知一下，谢谢