定位
定位有三種：
1.相對定位 2.絕對定位 3.固定定位
這三種定位，每一種都暗藏玄機，所以我們要一一單講。
相對定位
相對定位:相對於自己原來的位置定位
現象和使用：
1.如果對當前元素僅僅設置了相對定位，那么與標准流的盒子什么區別。
2.設置相對定位之后，我們才可以使用四個方向的屬性： top、bottom、left、right
特性：
1.不脫標
2.形影分離
3.老家留坑（占着茅房不拉屎，惡心人）
所以說相對定位 在頁面中沒有什么太大的作用。影響我們頁面的布局。我們不要使用相對定位來做壓蓋效果
用途：
1.微調元素位置
2.做絕對定位的參考（父相子絕）絕對定位會說到此內容。
參考點：
自己原來的位置做參考點。
絕對定位
特性：
1.脫標 2.做遮蓋效果，提成了層級。設置絕對定位之后，不區分行內元素和塊級元素，都能設置寬高。
參考點(重點)：
一、單獨一個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。
二、以父輩盒子作為參考點
1.父輩元素設置相對定位，子元素設置絕對定位，那么會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
2.如果父親設置了定位，那么以父親為參考點。那么如果父親沒有設置定位，那么以父輩元素設置定位的為參考點
3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點
注意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標准流，影響頁面的布局。相反‘父相子絕’在我們頁面布局中，是常用的布局方案。因為父親設置相對定位，不脫離標准流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
還要注意，絕對定位的盒子無視父輩的padding
作用：頁面布局常見的“父相子絕”，一定要會！！！！
絕對定位的盒子居中
當做公式記下來吧！
*{ padding: 0; margin: 0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; /*margin: 0 auto;*/ position: relative; left: 50%; margin-left: -480px; /*設置絕對定位之后，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來 設置子元素絕對定位，然后left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/ }
固定定位
固定當前的元素不會隨着頁面滾動而滾動
特性:
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后面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用