標準文檔流：?我們在編寫html代碼的時候，通常的各個元素的布局方式是按照我們編寫代碼的順序來排布的，從左到右，從上到下的順序，當然，如果都是行內元素則都在一行顯示，如果碰到塊級元素就讓塊級往下獨占一行顯示，這種就叫標準文檔流
position的四個屬性：
一、相對布局（relative）：當我們寫了三個行內元素ABC，則它們會從左到右挨在一起排布，如果將中間的元素B加上相對布局，調整它的下間距，那么它會相對于它之前按照標準文檔流放入的起始位置向上（正數向上負數向下）移動，A和C的位置保持不變,看下面的例子
可以看出中間的元素向上移動了10個像素，而左右兩邊的元素都沒有動
二、固定布局（fixed）：加上這個屬性就會脫離標準文檔流的限制，按照上面的例子，如果對中間的strong元素加上固定布局，那么右邊的元素a會向左移，與中間的srong元素重疊在一起，也就是左邊和右邊的元素按照標準文檔流來排布，相當于中間的元素不存在一樣，看下面的代碼
可以看出最右邊的元素直接挨著最左邊的元素，無視中間加上固定布局元素的存在，這樣固定元素就脫離了標準文檔流的限制，如果對其設置邊距，邊距是相對于瀏覽器視口作為參照物的，而且在拖動瀏覽器的時候該元素也不會跟著滑動，而是固定在那里（類似懸浮效果）
可以看出當我們滑動滾動條時，固定布局的元素也沒有跟著移動
三、絕對布局（absolute）：當元素設置了絕對布局，那么該元素的相對參照物就是第一個設置了位置布局的父view，也就是第一個設置了絕對布局、相對布局或者固定布局的父view，如果都是默認的static布局，那么該元素的參照物就是視口，設置了絕對布局的元素會脫離標準文檔流，而且不占父view的大小,看下面的例子
可以看出三個div按照標準文檔流布局就是上面的樣式，三個div默認都是static布局，這時如果將最里面的div box3設置成絕對布局,box就脫離的標準文檔流的束縛，然后向外層找第一個設置了位置布局的父view，一直到視口都沒有找到，這時就以視口為參照進行布局
可以看出box3設為絕對布局后，參照物變為了視口，所以距離視口的上右間距都為100
注意：當box3只是設置了絕對布局，但沒有設置上下左右這些屬性時，box3的這些屬性時auto自動的，也就是不管會默認放在什么位置都不會覺得奇怪，而且這里和之前的固定定位不一樣，固定定位當瀏覽器滾動條滑動的時候，固定定位的元素不會跟著滑動，但絕對定位的元素是會跟著一起滑動的
下面再看下將box3設為絕對定位的同時將box2設置為相對定位
可以看出當我們將box3的父view box2設置為相對定位后，box3的參照物就變為了box2
再看我們將box3設為絕對布局的同時將box1設為相對布局，box2位默認static布局
可以看出當我們將box3的祖父view box1設置為相對定位后，box3的參照物就變為了box1
子絕父相：在實際開發中，我們將子視圖設為絕對布局時，一般都會將父視圖設為相對布局，這樣可以達到父視圖的位置還是原來的位置，如果將父視圖設為絕對布局或者固定布局，那父視圖的位置也會跟著發生改變，他們都會脫離標準文檔流布局
我們再來驗證下絕對布局不會占用父視圖的大小
可以看出按照標準文檔流的布局，<span>標簽和<div>標簽的位置就是上圖所示，inline-block表示包裹住子元素，不要有多余的區域，如果不設置該屬性，那么box1作為塊元素將顯示整行，也就是藍色背景會填充到最右邊。
我們將box2設為絕對布局，并且將box1設為相對布局，如下
可以看出絕對布局的box2的參照物就是具有相對布局的父view box1，top-30px，表示距離box1的頂部有30px，與左邊對齊，而且box1的背景顏色只有<span>文字的大小區域，并沒有將box2的大小計算在內，說白了box1的大小就是<span>元素的大小
四、默認布局（static）：按照標準文檔流進行布局，并且static布局的元素不會受到top/left/bottom/right屬性的影響。布局元素的位置即其在標準文檔流中的位置。
最后說一個細節，每次最外層的view和瀏覽器的視口都有一點間距，就是說body的上左都與瀏覽器有一點間距，這或許是瀏覽器故意這樣處理的，只需要將body的margin設為0即可
