css定位模式position
阿新 • • 發佈：2018-11-10
定位模式position
絕對定位
position: absolute;絕對定位，它會將需要定位的元素，從元素結構樹中將定位的元素抽離，然後使用left、 top、right、bottom四個屬性，分別定位該元素需要距離最近的父元素的邊框移動多少個畫素，比如：left：200px，將元素向右移動200個畫素，讓該元素距離父元素的邊框存在200個畫素的距離。
如果元素不存在可以支援定位屬性的父元素存在，那麼將直接使用body來作為移動的標準。元素在移動之後，之前的位置將會自動讓出，由其他元素來繼續填充!（移動的畫素可正可負）
例如：
.div01{
position : absolute;
/*表示距離父級元素的左邊框移動了多少個畫素*/
left: 100px;
/*表示距離父級元素的頂邊框移動了多少個畫素*/
top: 50px;
}
它的父類是body
相對定位
position: relative;相對定位，需要定位的元素，不會從元素結構樹中被抽離出來，當然，我們還是用left、 top、right、bottom四個屬性，分別定位該元素相對於原有的位置移動多少個畫素。元素在移動之後，之前元素佔有的位置依然佔用，不會騰出來。
效果：
固定定位
position: fixed;固定定位，如果說絕對定位是採用父元素來做為參考標準，相對定位是採用元素之前的位置來作為參考標準，那麼固定定位它就是採用瀏覽器的邊框來作為參考標準。
固定定位它就是採用瀏覽器的邊框來作為參考標準。它跟absolute絕對定位一樣，它也會被踢出元素結構樹，而單獨存在。依舊使用left,、top、 rght,、bottom個屬性，分別定位該元素需要距離瀏覽器邊框移動多少個畫素。元素移動之後位置由其他元素替代