定位是CSS樣式最常用的幾個屬性之一，但是你真的瞭解定位的用法嗎？
CSS定位使用position屬性，其屬性值為static、fixed、absolute和relative。
- static是默認值，表示沒有定位
- fixed是固定定位，相對於窗口定位，使用position：fixed的元素，在配合left、top、right以及bottom等屬性可以將元素固定在窗口固定位置，使元素不會隨著窗口的滑動而滑動。例如我們常見的返回頂部：
京東側邊欄
固定定位代碼案例模仿京東側邊欄
模仿京東側邊欄
- relative是相對定位，其實就是相對於自己原來的位置，進行偏移，同樣需要配合left、top、right以及bottom等屬性使用。
外層大盒子為父元素，內層小盒子為子元素，子元素初始狀態顯示距離父元素左邊100px，當向右移動後，移動到虛線框位置，其實就是相對於自己原來的位子移動100px，不是相對父元素移動。
相對定位
- absolute是絕對定位，其實就是相對於離他最近的已經定位的父元素進行偏移，如果所有父元素都沒有設置定位，那麼將相對於窗口定位。
絕對定位
絕對定位
以上是我們在學習定位時的基本知識，但是你知道定位還有其他什麼妙用嗎？
- 全屏
有時候我們需要設置整個網頁為一屏時，例如我們的登錄頁面經常就是這樣的。例如搜狐號登錄窗口
搜狐號登錄頁面
設置絕對定位，將寬高設置為100%，即可實現。
全屏
- 子元素相對於父元素水平居中垂直居中
子元素相對父元素居中
- 子元素相對於父元素水平垂直居中2，根據思路自行完成
思路：
第一步創建一個已定位的父區域box1
第二步創建一個和中間內容大小一致的元素box2，設置絕對定位，且left為50%，top為50%，這樣該元素的左上角定點就在父元素box1中心。
box2的定點與box1的中點重合
第三步，在虛線元素box2內部放我們需要居中顯示的元素box3，和box2寬高一致，設置絕對定位，top:-50%;left:-50%;這時我們box3就會移動一半在中心點上方，移動一半在中心點左邊，那麼box3和box1中心點重合，就可以實現box3在box1中水平居中，垂直居中。之後將box2設置為無背景即可
box3中點與box1中點重合
根據思路自行寫出代碼
分享到:
閱讀更多 科技奇幻 的文章
