咱們一塊兒來學習CSS的三種定位

寫在前面：學習CSS定位的總結和心得，望互相學習討論，請多多指教。

如今開始個人表演^-^：

CSS中的三種定位：
    position:relative;  // 相對定位
    position:absolute;  // 絕對定位
    position:fixed;    // 固定定位

實驗原始代碼：

.box1{
        width: 200px;
        height: 200px;
        background-color: #33ccff;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #ff6699;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: #ff6600;
    }

原始效果展現：

1、相對定位 [position:relative;]

相對本身原來位置進行位置調整，即以原先位置爲參照物，微調元素位置。

爲了便於理解，作如下實驗： 
    咱們如今將盒子2進行相對定位，並向下和向右進行了位置調整。   
    .box2{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        top: 200px;
    }

咱們能夠看到，盒子2進行了位置的調整，
可是原先所在位置依然空出，
這就是相對定位不脫離標準文檔流的具體體現。
咱們把盒子具象化爲人，
便可以理解爲人還在原來的位置上，可是神卻跑去其餘地方了。

相對定位的用途：
    1）可微調元素位置；
    2）可作絕對定位的參考。

2、絕對定位 [position:absolute;]

絕對定位較相對定位更靈活，絕對定位以後會脫離標準文檔流。
爲了便於理解，咱們作以下實驗：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        top: 200px;
    }

能夠看到，由於盒子2的絕對定位脫離標準流，
盒子3佔據了原先盒子2所在位置。
另外盒子2的參考點發生了改變，
咱們經過如下實驗進行理解：

（1）用top描述時的參考點：

變化1：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 50px;
        top: 50px;
        }

變化2：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        top: 200px;
        }

變化3：
    body{
        height: 1000px;
    }
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 400px;
        top: 400px;
        }

不滾動滾動條：

滾動頁面：

經過實驗變化一、二、3的移動對比，咱們能夠發現，
此時絕對定位移動的參考點是在左上角，爲了進一步肯定，
變化3進行了滾動頁面，對比以後咱們能夠發現，
絕對定位以後，top屬性的移動參照點是頁面的左上角。

（2）用bottom描述時的參考點：
變化1：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 50px;
        bottom: 50px;
    }

變化2：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        bottom: 200px;
    }

變化3：
     .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 400px;
        bottom: 400px;
    }   
   不滾動滾動條：

滾動頁面：

經過實驗變化一、二、3的移動對比，咱們能夠發現，
此時絕對定位移動的參考點是在左下角，
爲了進一步肯定，變化3進行了滾動頁面，
對比以後咱們能夠發現，
絕對定位以後，bottom屬性的移動參照點是屏幕首屏顯示頁面的左下角。

另外，由於絕對定位以後脫離標準流，
所以margin: 0 auto;的居中方法就失效了，
咱們可經過其餘方法來實現居中，
下面僅簡單實現一種水平居中。
    咱們作如下實驗，實現絕對定位以後的水平居中：
        .box1{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #33ccff;
        // 以下方式實現
        left: 50%;
        margin-left: -100px;
    }

總結：

一、絕對定位後會脫離標準流；
二、由top屬性設置的參照點爲頁面的左上角；
三、由bottom屬性設置的參照點爲首屏頁面左下角。
四、水平居中簡單實現：left:50%; margin-left:負寬度的一半。

3、固定定位 [position:fixed;]

固定定位的參照物是瀏覽器的窗口，
滾動頁面時始終固定在瀏覽器的相對位置而不發生位置變化，
而且會脫離標準文檔流。
爲了便於理解，咱們作以下實驗：
   
        .box2{
        position: fixed;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        }

不滾動頁面：

滾動頁面：

關於絕對定位後續將有更深刻的理解，
這一次的學習分享就到這裏了，歡迎你們一塊兒交流，再相會~
Github請戳:https://github.com/Hwj1220