CSS最重要的三個技術:浮動、盒模型、定位，這裡主要介紹一下定位方面的知識：
我們都知道定位通常可以分為三種:固定定位、絕對定位、相對定位。

 **相對定位:**
    position:relative;
    left:
    right:
    top:
    bottom:
    正值的話分別表示向右、向左、向下、向上移動;
    負值的話分別表示向左、向右、向上、向下移動;
    相對定位表示元素相對自己當前的位置移動，一般左右任選一個，上下任選一個，進行定位。

****參見程式碼:****

div{
        width: 200px;
        height: 200
 
px;
    }
    .box1{
        background-color: #f00;
    }
    .box2{
        background-color: #0f0;
    }
    <div class="box1"></div>
    <div class="box2"></div>
        ```

若是加上:

        position: relative;
        top: 200px;
        left:200px; 
    可以發現div分別向左移動了200px,分別向下移動了200px，但是原始位置還保留ing
 

定位前的頁面效果如下

定位後的頁面效果如下

絕對定位
position:absolute;
top:
bottom:
left:
right:
也是四個屬性選擇其二，正值、負值表示同相對定位
但值得注意的一點是，一旦給元素設定絕對定位的話，在父級沒有設定定位屬性的話，預設以body的位置定位，比如

position:absolute;
top:0px;
left:0px;

這個表示的是以頁面的左上角開始定位
還有一點：

position:absolute;
bottom:0;
left:0;

這個則表示的是以當前瀏覽器顯示的頁面的左下角為基準點，定位。
通常我們會通過“子絕父相

固定定位
position:fixed;
left:
right:
top:
bottom:
正負值等效果參見以上，其定位是針對瀏覽器即可視區來定位的，就例如一些網站固定的選單欄等：

只需要設定：

position:fixed;
top:0;
left:0;

便可以得到京東固定導航欄的效果

z-index
z-index主要是用於覆蓋及層疊，z-index的值為數字，數字大的覆蓋疊加在數字小的上面，但是要配合定位一起使用。
預設的壓蓋順序:
1)定位元素壓蓋無定位元素。
2)如果都定位了，那麼html寫在後面壓蓋前面的z-index沒有單位的，在都定位了的元素中，數字大的壓蓋數字小的，只有定位了的元素才能使用z-index。
3)在父級元素與子代元素都有z-index的情況下，我們可以先比較父級元素的z-index,父級的z-index大的子元素將覆蓋父級z-index小的子元素;在兩個父級的z-index相等的情況下，無論他們的子代元素的z-index有多大，都遵循後來的元素覆蓋前面的元素的情況。