定位 和 z-index

3、定位

　　定位有三種：(1) 相對定位、(2) 絕對定位、(3) 固定定位

一、相對定位（相對於本身原來的位置定位）

       現象和使用：

　　　　a、若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子沒什麼區別；

　　　　b、設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right；

　　特性：

　　　　a、不脫離標準流；

　　　　b、形影分離；

　　　　c、老家留坑，就是原來的位置還在（佔着茅房不拉屎，噁心人）；

　　注意：因此說相對定位在頁面中沒有什麼太大的做用，影響咱們頁面的佈局，咱們不要使用相對定位來作壓蓋效果。

　　用途：

　　　　a、微調元素位置；

　　　　b、作絕對定位的參考（父相子絕），絕對定位中會介紹此內容（經常使用）；

　　參考點：

　　　　本身原來的位置作參考點；

 

二、絕對定位

　　特性：

　　　　a、脫離標準流；

　　　　b、作遮蓋效果，提高了層級，設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高；

　　參考點（*****）：

　　（1）單獨一個絕對定位的盒子：

　　　　a、當我使用top屬性描述的時候，是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置；

　　　　b、當我使用bottom屬性描述的時候，是以首屏頁面左下角爲參考點來調整位置；

　　（2）以父輩盒子做爲參考點（經常使用）：

　　　　a、父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺；

　　　　b、若是父親設置了定位，那麼以父親爲參考點，那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點；

　　　　c、不單單是父相子絕，父絕子絕和父固子絕都是以父輩元素爲參考點；

 

　　注意：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕，由於絕對定位脫離標準流，影響頁面的佈局。相反，‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案，由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

　　還要注意，絕對定位的盒子無視父輩的padding。

　　做用：頁面佈局常見的「父相子絕」，必定要會！！！

 

三、固定定位（固定當前的元素不會隨着頁面滾動而滾動）

　　特性：

　　　　a、脫標；

　　　　b、遮蓋；

　　　　c、提高層級；

　　　　d、固定不變；

　　參考點：

　　　　a、設置固定定位，用top描述，那麼是以瀏覽器的左上角爲參考點；

　　　　b、若是用bottom描述，那麼是以瀏覽器的左下角爲參考點；

　　做用：

　　　　a、返回頂部；

　　　　b、固定導航欄；

　　　　c、小廣告；

 

四、z-index

　　這個東西很是簡單，它有如下四大特性，每一個特性你記住了，頁面佈局就不會出現找不到盒子的狀況。

　　a、z-index 值表示誰壓着誰，數值大的壓蓋住數值小的；

　　b、只有定位了的元素，纔能有z-index，也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index；

　　c、z-index值沒有單位，就是一個正整數，默認的z-index值爲0，若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人。定位了的元素，永遠壓住沒有定位的元素；

　　d、從父現象：父親慫了，兒子再牛逼也沒用；

 

五、應用：絕對定位的盒子居中（當公式記下來！！！）

　　position:absolute;

　　left:50%;

　　margin-left: -width/2;  /*即自身寬度的一半*/

 1 *{
 2             padding: 0;
 3             margin: 0;
 4         }
 5         .box{
 6             width: 100%;
 7             height: 69px;
 8             background: #000;
 9         }
10         .box .c{
11             width: 960px;
12             height: 69px;
13             background-color: pink;
14             /*margin: 0 auto;*/
15             position: relative;
16             left: 50%;
17             margin-left: -480px;
18 
19             /*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來 設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
20         }