定位

定位

定位有三種：

1.相對定位 2.絕對定位 3.固定定位

這三種定位，每一種都暗藏玄機，因此咱們要一一單講。

 

相對定位

相對定位:相對於本身原來的位置定位

現象和使用：

1.若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。

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

特性：

1.不脫標

2.形影分離

3.老家留坑（佔着茅房不拉屎，噁心人）

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

用途：

1.微調元素位置

2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。

參考點：

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

絕對定位

特性：

1.脫標 2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。

參考點(重點)：

1、單獨一個絕對定位的盒子

1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。

2、以父輩盒子做爲參考點

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

2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點

3.不單單是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點

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

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

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

絕對定位的盒子居中

當作公式記下來吧！

 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         }

 

固定定位

固定當前的元素不會隨着頁面滾動而滾動

特性: 

1.脫標 2.遮蓋，提高層級 3.固定不變

參考點：

設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點

做用： 1.返回頂部欄 2.固定導航欄 3.小廣告

z-index

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

• z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
• 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
• z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
• 從父現象：父親慫了，兒子再牛逼也沒用