CSS盒子定位

又到周末了，又結束了一周的課程了，表示昨前天開始老師布置家庭作業開始寫頁面了，前天的還好，12點之前搞定，昨天的熬到2點，表示大神不要笑哈，畢竟能力有限，第二天看了老師的講解，才發現做了非常多的無用功，好了，閑聊就到這裏吧，下面我分享下這周老師講到的一些內容，以下都是自己的理解哈，僅供參考：
CSS盒子定位：
什麼是盒子定位呢，顧名思義，就是元素盒子(以下主要以塊級盒講解)在頁面中的位置，定位就是確定他的位置，盒子定位分為以下四種 ：
1、靜態位置(position：static)也就是默認值：
每一個元素在沒有float值的時候，都有position值，就是static，可以直接理解它在是默認值的時候就是常規流，所有規則與常規流一樣；
2、相對位置(position：relative)：
相對定位：相對於自己原來的位置進行移動。
實際代碼操作：對於標簽樣式先聲明
position:relative;
再描述移動方向與像素大小
left帶正數向右移，以此類推，正數情況下方向相反，那麼在這種情況下對於初學的我們，這種定位可以以帶負數形式就與標簽頭方向相同了。
以相對定位移動盒子後盒子時不脫離標准流的，所移動的是一個“虛影”，並非整個盒子往那邊移動，所以盒子移動之後，周圍的盒子是不會發生變化的。
相對定位在實戰中用得比較少，一般用於盒子微調。
3、固定位置(position：fixed)：
固定定位，顧名思義就是固定盒子不隨網頁滑動而移動
實際代碼：position:fixed;
可以通過top、bottom、left、right設置像素值來固定位置；
一般用於導航欄或者網頁角落的廣告；
4、絕對位置(position：absolute)：
絕對定位使元素的位置與文檔流無關，也就是脫離文檔流，因此不占據空間，比如說有三個縱向排列的三個元素盒子，尺寸寬高都為100px，如果給中間的盒子設置了position：absolute；那麼他就會脫離出來，它下面的那個盒子就會向上浮，絕對定位盒子的包含塊主要看他父級或祖先級裏面有沒有定義了position值的，如果有，就是他的包含塊；
這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
其實相對定位與絕對定位都屬於常規流。
標簽：定位,盒子,位置,相對,position,移動,CSS
來源： https://www.cnblogs.com/potapo-tudou/p/10540166.html