#定位(position)

如果，說浮動， 關鍵在一個 “浮” 字上面， 那麼 我們的定位，關鍵在於一個 “位” 上。

PS: 定位是我們CSS算是數一數二難點的了，但是，你務必要學好它，我們CSS離不開定位，特別是後面的js特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更加輕鬆哦！

## 為什麼要用定位？

那麼定位，最長運用的場景再那裡呢？   來看幾幅圖片，你一定會有感悟！

## 元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

| 邊偏移屬性  | 描述                      | | ------ | ----------------------- | | top    | 頂端偏移量，定義元素相對於其父元素上邊線的距離 | | bottom | 底部偏移量，定義元素相對於其父元素下邊線的距離 | | left   | 左側偏移量，定義元素相對於其父元素左邊線的距離 | | right  | 右側偏移量，定義元素相對於其父元素右邊線的距離 |

也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px;  left: 30px; 等等

2、定位模式(定位的分類)

在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

| 值        | 描述                       | | -------- | ------------------------ | | static   | 自動定位（預設定位方式）             | | relative | 相對定位，相對於其原文件流的位置進行定位     | | absolute | 絕對定位，相對於其上一個已經定位的父元素進行定位 | | fixed    | 固定定位，相對於瀏覽器視窗進行定位        |

## 靜態定位(static)

靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在HTML文件流中預設的位置。

上面的話翻譯成白話：  就是網頁中所有元素都預設的是靜態定位哦！ 其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS： 靜態定位其實沒啥可說的。

## 相對定位relative(自戀型)

小笑話：  剛剛看到一個超級超級帥的帥哥，看得我都忍不住想和他搞基了。世間怎會有如此之完美的男人。我和他就這樣一動不動的對視著，就彷彿一見鍾情。時間也在這一瞬間停止了。直到我的手麻了。才戀戀不捨的放下鏡子。。。。  

相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。

對元素設定相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文件流中的位置仍然保留。如下圖所示，即是一個相對定位的效果展示：

注意：   

1. 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續佔有。 2. 其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是 讓多個塊級元素一行顯示，那麼定位的主要價值就是 移動位置， 讓盒子到我們想要的位置上去。

## 絕對定位absolute (拼爹型) 小笑話：

吃早飯時，老婆往兒子碗裡放了兩個煎蛋，兒子全給了我，還一本正經地說：“爸爸，多吃點，男人養家不容易。” <br/>

我一陣感動，剛想誇他兩句。 

兒子接著說：“以後全靠你讓我拼爹了！” ~~~

　[注意] 如果文件可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對於正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。

注意：    絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置。

### 父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準對齊(document文件)。

### 父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。 

### 子絕父相

這個“子絕父相”太重要了，是我們學習定位的口訣，時時刻刻記住的。

這句話的意思是 子級是絕對定位的話， 父級要用相對定位。

首先， 我們說下， 絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。

就是說， 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的。

但是，在我們網頁佈局的時候， 最常說的 子絕父相是怎麼來的呢？

所以，我們可以得出如下結論：

因為子級是絕對定位，不會佔有位置， 可以放到父盒子裡面的任何一個地方。

父盒子佈局時，需要佔有位置，因此父親只能是 相對定位. 

這就是子絕父相的由來。

## 絕對定位的盒子水平/垂直居中

普通的盒子是左右margin 改為 auto就可， 但是對於絕對定位就無效了

定位的盒子也可以水平或者垂直居中，有一個演算法。

1. 首先left 50%   父盒子的一半大小

2. 然後走自己外邊距負的一半值就可以了 margin-left。

   ​

## 固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，類似於 正方形是一個特殊的 矩形。它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位。

當對元素設定固定定位後，它將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。

固定定位有兩點：

1. 固定定位的元素跟父親沒有任何關係，只認瀏覽器。 2. 固定定位完全脫標，不佔有位置，不隨著滾動條滾動。

記憶法：  就類似於孫猴子， 無父無母，好不容易找到一個可靠的師傅（瀏覽器），就聽的師傅的，別的都不聽。

ie6等低版本瀏覽器不支援固定定位。

## 疊放次序（z-index）

當對多個元素同時設定定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。

比如：  z-index: 2;

注意：

1. z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。

2. 如果取值相同，則根據書寫順序，後來居上。

3. 後面數字一定不能加單位。

4. 只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。