1.相對定位：相對定位就是相對於自己以前在標準流中的位置來移動。

1.1相對定位是不脫離標準流的, 會繼續在標準流中佔用一份空間

1.2在相對定位中同一個方向上的定位屬性只能使用一個

1.3由於相對定位是不脫離標準流的, 所以在相對定位中是區分塊級元素/行內元素/行內塊級元素

1.4由於相對定位是不脫離標準流的, 並且相對定位的元素會佔用標準流中的位置, 所以當給 相對定位的元素設定margin/padding等屬性的時會影響到標準流的佈局

寫法：

img{
            width: 100px;
            height: 50px;
            position: relative;
            top: 20px;/*距離自己原來位置左邊20px*/
        }
 

如果加上margin那麼其總體距離等於他們的值之和。

2.絕對定位：絕對定位就是相對於body（父元素無定位屬性）來定位。

2.1絕對定位的元素是脫離標準流的

2.2絕對定位的元素是不區分塊級元素/行內元素/行內塊級元素

絕對定位參考點：

1.規律

預設情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點

2.如果一個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點

2.1只要是這個絕對定位元素的祖先元素都可以

2.2指的定位流是指絕對定位/相對定位/固定定位

2.3定位流中只有靜態定位不行

3.如果一個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那麼這個絕對定位的元素會以離它最近的 那個定位流的祖先元素為參考點

由於這一特性，它經常和相對定位進行搭配使用，按照子絕父相原則來

寫法：

 .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;/*父元素*/
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;/*子元素*/
            left: 0;
            bottom: 0;
          }
 

如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點，並且，一個絕對定位的元素會忽略祖先元素的padding

讓絕對定位的元素水平居中 只需要設定絕對定位元素的left:50%; 然後再設定絕對定位元素的 margin-left: -元素寬度的一半px;

固定定位：固定定位和前面學習的背景關聯方式很像, 背景定位可以讓背景圖片不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動

注意點:

1.固定定位的元素是脫離標準流的, 不會佔用標準流中的空間

2.固定定位和絕對定位一樣不區分行內/塊級/行內塊級

3.IE6不支援固定定位

寫法：

  .nav{
            width:100%;
            height: 45px;
            background: url("images/nav.png") no-repeat center top;
            position: fixed;
            top: 0;
            z-index: 1;
        }

1.什麼是z-index屬性?
預設情況下所有的元素都有一個預設的z-index屬性, 取值是0.
z-index屬性的作用是專門用於控制定位流元素的覆蓋關係的

1.預設情況下定位流的元素會蓋住標準流的元素
2.預設情況下定位流的元素後面編寫的會蓋住前面編寫的
3.如果定位流的元素設定了z-index屬性, 那麼誰的z-index屬性比較大, 誰就會顯示在上面

注意點:
1.從父現象
1.1如果兩個元素的父元素都沒有設定z-index屬性, 那麼誰的z-index屬性比較大誰就顯示在上面
1.2如果兩個元素的父元素設定了z-index屬性, 那麼子元素的z-index屬性就會失效,
也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面