定位

定位有三種：

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.小廣告

css 定位