切圖仔基礎篇————如何熟練的使用定位

前言：

在平常的工做中，咱們也許會遇到極爲苛刻的還原要求——————好比所謂的偏差不超過1個像素。

做爲前端開發人員，對於這種所謂1px的偏差。。。怎麼說呢，1px已是屏幕最低分辨率了，怎麼可能還有更低的偏差呢，這分明是扯淡。

不過，有些事確定是要追求極致的。爲了追求極爲細緻的頁面還原，position定位屬性是必不可少的學習。

position的屬性值

提到position的屬性值，就要先說明一點。在CSS的樣式編寫中，你要養成一個特殊的順序習慣：上右下左。

這對於頁面樣式的簡寫有幫助。

而後就是座標的創建：以左上角爲原點，向右爲X軸正半軸，向下爲Y軸正半軸。

二者結合，座標的創建。

position的值能夠設爲relative，absolute，fixed，static。

接下來以這段代碼做爲實例，進行演示。

1 <div class="box">
2     <div class="box1"></div>
3 </div>
複製代碼

0,默認定位：

不會讓div或者其餘元素脫離文檔流，而是遵循排版的原則，從上到下，塊級元素換行，行內元素不換行等等通用原則。因此，若是不用定位屬性，那麼這個position就不用設置。

1,相對定位：

相對於元素本來的位置進行位移，本來的位置不爲空，仍然已經位移的該元素繼續佔用

1 .box {
2     width: 50px;
3     height: 50px;
4     position: relative;
5     top: 50px;
6     left: 10px;
7 }
複製代碼

以上代碼將實現將box以box最初的位置向右移動50px，向下移動10px。

2.絕對定位：

相對於元素的父元素最左上角進行座標定位，會脫離文檔流，產生相似浮動的效果

1 .box1 {
2     width: 10px;
3     height: 20px;
4     position: absolute;
5     top: 10px;
6     left: 10px;
7 }
複製代碼

以上代碼將實現將box1的位置以當前的視口位置的原點爲基準位置進行移動相應得距離；

這裏要注意如下兩點：

1，若是父元素沒有設置定位的話，那麼，絕對定位是相對於body標籤進行定位的。

2，若是父元素設置了相對定位，絕對定位，固定定位，任意一種，那麼，絕對定位相對於父元素左上角進行定位。

3，總結一下，定位是相對於父元素進行定位的，若是父元素沒有設置定位屬性，則相對於BODY標籤進行定位。

3.固定定位：

相對於當前窗口最左上角進行座標定位

1 .box {
2     width: 50px;
3     height: 50px;
4     position: fixed;
5     top: 20px;
6     left: 0px;
7 }
複製代碼

以上代碼將會將box固定在視窗的距離頂部20px的左側邊緣位置。

定位使用經驗

絕對定位會形成元素脫離了文檔流，這時會產生元素堆疊的狀況。此時能夠配合z-index的屬性，
如同PS排列圖層同樣，對頁面的層級進行排序。

父元素相對定位，子元素絕對定位，是用來完美還原頁面的一種手段，通常用來還原一些較爲小的組件。

定位屬性雖然強力，可是最好不要用來作總體的頁面佈局，容易形成頁面錯亂。
複製代碼

參考連接1：www.cnblogs.com/lianshoulug…

結語：

以上連接，我看過，很不錯的筆記，我稍微整理了一下我我的以爲有用的部分，雖然說可能還不夠詳細，可是已經夠了解這個屬性的意思了。

抓住了屬性的本質，便不會被各類變化所困擾。

最後的最後：歡迎指出不足，來打臉。