絕對定位absolute精講

一直沒搞清楚position：absolute relative fixed static 等值 下文是absolute的精講 

relative： 相對於自身原來的位置定位。

fixed： 和absolute差不多

一般默認position的值是static 

絕對定位基本特徵

絕對定位的第一個特徵在於會從文檔流中脫離，不受其他元素影響，定位是“絕對”的，所以稱之爲絕對定位，如果是相對定位，會受其他元素影響，則定位是“相對”的；

未使用定位：即元素在正常文檔流當中

 

1. <div class="frame">

2. <div id="div1"></div>

3. <div id="div2"></div>

4. </div>

1. .frame {

2. margin: 0 auto;

3. margin-top: 50px;

4. width: 400px;

5. height: 300px;

6. background-color: yellow;

7. }

8. #div1 {

9. width: 100px;

10. height: 50px;

11. background-color: blue;

12. }

13. #div2 {

14. width: 200px;

15. height: 100px;

16. background-color: green;

17. }

當我們給元素加上絕對定位的時候，元素會脫離當前文檔流；

1. #div1 {

2. position: absolute;

3. }

也就是說絕對定位的元素再文檔流中沒有位置，它從文檔流中脫離了出來，後面的元素會填充掉它原來的位置；

絕對定位的第二個特徵在於定位位置相對於第一個具有定位屬性（即 position 爲 relative 或者 absolute）的祖先元素；

1. #div1 {

2. top: 30px;

3. }

當給絕對定位元素設置定位值時，該元素會延着DOM樹向上查找，直到找到一個具有定位屬性的祖先元素，則定位相對於該元素，在該例子中，由於其祖先元素都沒有定位屬性，則該絕對定位元素會相對於body體進行定位；如果給其父元素加上一個定位屬性，則該絕對定位元素會相對於這個父元素；

1. .frame {

2. position: relative;

3. /* 或者 position: absolute; */

4. }

        絕對定位高級特性 

絕對定位元素的第一個高級特性就是其具有自動伸縮的功能，當我們將 width 設置爲 auto 的時候（或者不設置，默認爲 auto ），絕對定位元素會根據其 left 和 right 自動伸縮其大小（注意：請牢記絕對定位元素的定位值是相對於第一個具有定位屬性的祖先元素）；

1. #div1 {

2. width: auto;

3. left: 100;

4. right: 50px;

5. }

根據第一個高級特性，我們可以衍生出第二個高級特性，由於絕對行爲元素具有自動伸縮的功能，如果 width 值爲 auto 此時如果我們設置 left 和 right 都爲0，則該元素會填充滿其相對的元素，如果此時我們將寬度設置爲固定值，這是絕對定位元素會優先取 left 值作爲定位標誌（這個標準適用於從左向右讀的文檔流中，而在少數從右往左讀的文檔流中，則優先取 right）。如果這時我們將 margin 設置爲 auto ，則絕對定位元素會呈現居中狀態；

1. #div1 {

2. margin: auto;

3. width: 100px;

4. left: 0;

5. right: 0;

6. }

其實並不一定非要設置成0，在 margin: auto 下，只要 left 和 right 的值相等，且不超過其相對元素減去該絕對定位元素 width 的一半，就可以實現居中；如果其 left 超出了範圍，那麼會取 left 的值作爲定位（從左向右的文檔流）；/* 至於在範圍能的值不等情況，大家可以自行測試一下 */

以上例子均在水平方向實現，那麼垂直方向是怎麼樣的呢？其實垂直方向的作用效果是一樣，垂直方向同樣可以自動拉伸，同理我們也可以實現垂直方向上的自動居中；

1. #div1 {

2. top: 0;

3. bottom: 0;

4. }

和水平居中有一點不同的是，無論 top 和 bottom 的值設置爲多少，只要相等，就可以垂直居中。