CSS | 走進position與float定位浮動和重疊，重新定義你的佈局（一）
css的一個小關卡position與float，它究竟有什麼用？
初學者在給頁面進行佈局時經常會利用div瘋狂堆積，如果沒有成功就使用margin擴張領地，現在需要告別這種方式了，使用定位和浮動使頁面佈局更簡單。
這張主要講的是position定位中的絕對定位和相對定位
一、絕對定位和相對定位
（一）學習定位和浮動前需要知道的兩個知識點
（1）首先我們需要知道當設定TRBL(top、right、bottom、left)時
同時設定left和right只有left生效；
同時設定bottom和top只有top生效；
（2）脫離文件流：需要明確脫離文件流不是脫離DOM樹。脫離文件流的元素不再佔據空間，如lrelative與其他元素重疊後還佔據空間，而脫離了文件流的absolute就不再有空間即不會有本應屬於它沒移動的空白位置。
（二）absolute與relative
（1）絕對定位absolute:脫離文件流，移動的時候自身的所佔空間消失。如果沒有父元素，absolute相對於html進行定位。
<style>.weizhi {position: absolute;top: 600px;left: 60px; }</style><body><divstyle="background-color:chartreuse;height: 200px;width: 200px;"class="weizhi"></div></body>
當存在父元素時，以父元素為標準。
<divstyle="background-color:chartreuse;height: 200px;width: 200px;"class="weizhi"><divstyle="background-color: brown;height: 50px;width: 50px;"class="weizhiSon"
當有一個同樣是absolute的同樣位置和大小的div，就算設定了浮動效果依然是蓋在第一個div上的。這是因為absolute脫離了文件流，float沒有效果。
.weizhi {position: absolute;float: left;top: 500px;left: 60px;bottom: 20px; }.weizhi2 {position: absolute;float: left;top: 500px;left: 60px;bottom: 20px; }<divstyle="background-color:chartreuse;height: 200px;width: 200px;"class="weizhi"></div></div><divstyle="background-color: blue;height: 200px;width: 200px;"class="weizhi2"></div>
（2）相對定位relative
相對定位沒有脫離文件流說明在元素移動時還保留著移動前的空間，這就是與absolute最重要的不同點。所以如果沒有給relative設定移動值，對於元素是沒有任何改變的。
怎樣能看出來relative沒有脫離文件流並保留了自己的位置呢，用一個absolute的div做對比
.Box1 {position: relative;/* float: left; */top: 10px;left: 10px;}.Box2 {position: relative;/* float: left; */top: 10px;left: 10px; }<divstyle="background-color:chartreuse;height: 200px;width: 200px;"class="Box1"><!-- <div style="background-color: blanchedalmond;height: 50px;width: 50px;" class="box_1"></div> --></div><divclass="Box2"style="background-color:darkolivegreen;height: 200px;width: 200px;"></div>
}.Box2 {position: relative;float: left;
}
由圖可得在relative中允許重疊
二、relative與absolute搭配使用效果更佳
（1）使用relative“拴住”absolute
在剛才的定義裡我們得知absolute絕對定位的元素的位置相對於最近的已定位父元素，所以就算使用absolute得元素擁有父元素，如果其沒有進行position，那麼absolute的元素依然會參照html進行定位
我們建立三個div
<divstyle="background-color: blueviolet; height: 300px;width: 300px;"class="Box3"><divstyle="background-color: rgb(222, 203, 240); height: 200px;width: 200px;"class="box_2">div2 <divstyle="background-color: rgb(188, 120, 252); height: 100px;width: 100px;"class="box_22">div3</div></div> </div>當div3的兩個父元素沒有進行定位時：
.Box3 {}.box_2 {}.box_22 {position: absolute;top: 0px;left: 0px; }
當我給div1（深紫盒子）加上relative
.Box3 {position: relative;}.box_2 {}.box_22 {position: absolute;top: 0px;left: 0px; }
最後我們給div2加上relative並top:20px；left:60px;
.Box3 {position: relative; }.box_2 {top: 20px;left: 600px; position: relative; }.box_22 {position: absolute;top: 0px;left: 0px; }
這次div3以div2作為標準進行top:0;left:0;的定位了
所以我們經常使用relative對absolute進行規束