相對定位與絕對定位

要想分清相對定位和絕對定位的差別，需要着眼於兩點：移動的參照物和對普通文檔流的影響。

1、移動的參照物

相對定位是“相對於”元素（本身）在文檔流中的初始位置；而絕對定位是“相對於”距離它最近的已定位祖先元素（即設置了position樣式屬性的祖先元素），如果不存在已定位的祖先元素，那么相對於初始包含塊（即瀏覽器）。

2、對普通文檔流的影響

在使用相對定位是，無論是否移動，元素仍然占據原來的空間。
而與之相反，絕對定位使元素的位置與文檔流無關，因此不占據空間。普通文檔流中其它元素的布局就像絕對定位的元素不存在時一樣。

看例子：

html結構

	<div class="wrapper">
        <div class="box"></div>
        <div class="box relative">relative</div>
        <div class="box"></div>
    </div>

    <div class="wrapper">
        <div class="box"></div>
        <div class="box absolute">absolute</div>
        <div class="box"></div>
    </div>

初始css代碼

	.wrapper{
        width:600px;
        border:1px dotted black;
        height:300px;
        position: relative;
    }
    .box{
        width:150px;
        height:100px;
        margin:10px;
        border:1px solid green;
        float: left;
    }

初始效果：

定位css代碼

	.relative{
        position: relative;
        left:30px;
        top:30px;
    }
    .absolute{
        position: absolute;
        left:30px;
        top:30px;
    }

初始效果：

以上為個人見解，望指教。