· 定位就是將盒子定在某個位置。定位=定位模式+邊偏移。所謂的定位模式，決定元素的定位方式。通過CSS的position屬性來設置，他的值可以分爲四種：靜態定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）。所謂的邊偏移即定位了盒子移動到最終的位置，有top、bottom、left和right四個屬性。分別具有以下含義：
| 邊偏移屬性 | 實例 | 描述 |
| top | top：50px; | 頂端偏移量，定義元素相對於其父元素上邊線的距離 |
| bottom | bottom：50px; | 底端偏移量，定義元素相對於其父元素下邊線的距離 |
| left | left：50px; | 左側偏移量，定義元素相對於其父元素左邊線的距離 |
| right | right：50px; | 右側偏移量，定義元素相對於其父元素右邊線的距離 |
靜態定位
靜態定位就是默認定位方式，無定位的意思。語法如下：
選擇器{position：static}；靜態定位按照標準流特性擺放位置，沒有邊偏移。而且在設計過程中很少用到靜態定位。
相對定位
相對定位就是元素移動的時候，相對於原來的位置來說的（俗稱自戀型定位）；語法如下;
選擇器{ position：relative； }
其特點：
1）是相對於自己原來的位置來移動的（移動的時候參照自己原來的位置）
2）原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待他（不脫標，繼續保持原來的位置）。
絕對定位
絕對定位是元素在移動位置的時候，相對於祖先元素（有爹拼爹，沒有爹拼爺爺，沒有祖先則以瀏覽器爲準）來說的（俗稱拼爹型）。
語法格式：
選擇器{ position：absolute； }
絕對定位的特點：
1）、如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器爲準定位（也就是document文檔）。
2）、如果祖先元素沒有因爲（相對、絕對、固定），則以最近一級有定位祖先元素爲參考點移動位置。
3）、絕對定位不再佔有原先的位置。（脫標）
關於子絕父相
子絕父相（子級使用絕對定位，父級使用相對定位）。
1）子級絕對定位，不會佔有位置，可以放到父盒子裏面任何一個位置，不會影響其他兄弟盒子
2）父盒子需要定位限制子盒子在父盒子內顯示
3）父盒子佈局是，需要佔有位置，因此父親只能是相對定位。
相對定位經常用來作爲絕對定位的父級。因爲父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位，當然子絕父相也不是絕對的，如果父元素不需要佔有位置，子絕父絕也會遇到的。
固定定位
固定定位是元素固定在瀏覽器可視區域位置，主要應用場景是頁面滾動時元素的位置不會改變。語法如下：
選擇器{ position：fixed； }定位的特點：（務必記住）
1.以瀏覽器的可視窗口爲參照點移動元素跟父元素沒有任何關係，不隨滾動條移動
2.固定定位不在佔有原先的位置
固定定位也是脫標的，其實固定定位也可以看做是一種特殊的地絕對定位。固定定位的小技巧：固定在版心右側位置：
/*設置盒子的大小*/ .box { width: 800px; height: 1000px; background-color: #8bd3af; margin: auto; } .circlefix { /*設置固定定位*/ position: fixed; left: 50%;/*設置定位的盒子走到瀏覽器可視區的一半位置*/ margin-left: 400px;/*在設置margin-left多走版心寬度的一半*/ top: 450px; width: 80px; height: 100px; background-color: #5e6662； }效果如下：
粘性定位
可以認爲是相對定位和固定定位的混合：語法如下：
選擇器{ position：sticky； top：10px; }粘性定位的特點
1.以瀏覽器的可視窗口爲參照點移動元素（固定定位特點）
2.粘性定位佔有原先的位置（相對定位特點）
3.必須添加top、left、 right、 bottom其中一個纔有效
定位的總結
定位的總結 定位模式 是否脫標 移動位置 是否常用 static 否 不能使用邊偏移 很少 relative 否（佔有位置） 相對於自身位置移動 常用 absolute 是（不佔有位置） 帶有定位的父級 常用 fixed 是（不佔有位置） 瀏覽器可視區 常用 sticky 否（佔有位置） 瀏覽器可視區 當前階段使用
1.一定記佳住相對定位、固定定位絕對定位兩個大的特點：1）.是否佔有位置（脫標否）2）以誰爲基準點移
動位置
2.學習定位重點學會子絕父相
定位拓展
絕對定位的居中算法
left：50%；/*left走50%，父容器寬度的一半*/ margin-left：-自身寬度 /*margin 賦值，向左移動自身寬度的一半*/