浮動，display轉塊轉行 ， 定位

這三部分學會後，網頁想幹嘛就幹嘛

定位有三種：1. 相對定位 2. 絕對定位 3. 固定定位

position: relative;

position:absolute;

position:fixed;

一、 相對定位

在頁面中，沒有什麽太大的作用，影響頁面的布局。

但是我們不要使用相對定位來做壓蓋效果。就兩個作用。

如果對當前元素僅僅設置相對定位，那麽與標準流下的盒子沒有什麽區別

設置相對定位後，我們就可以使用四個方向的屬性

相對定位，僅僅是用來微調我們元素的位置。

top left right bottom

相對於原來的自己。

position: relative;

top: 20px; 相對於原來的自己，向下移動20

left: 30px; 相對於原來的自己，向右移動30

三大特性：

1 . 不脫標【不影響別的元素】 2. 形影分離 3. 老家留坑

相對定位的用途：

1. 微調元素位置

可在html頁面中直接微調，顯示比較直觀

2. 做絕對定位的參考（父相子絕）見後面的絕對定位

二 絕對定位

　　（一）特性：

1. 脫離標準流

　 2. 做遮蓋效果，提升層級

　　3. 設置絕對定位之後，不區分行內元素和塊元素，都能設置寬高

（二）參考點

　　1. 父相子絕

　　絕對定位參考點：

　　當我使用top屬性描述的時候，是以頁面的左上角(瀏覽器的左上角)為參考點來調整位置

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

　　position: absolute;

　　top: 100px;

　　left: 100px;

當父輩元素設置相對定位，子元素設置絕對定位，那麽會以父輩元素左上角為參考點

這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺

如： 爺爺設置相對定位，父親沒有設置定位，兒子設置了絕對定位，那麽兒子是以爺爺為參考點

如： 爺爺設置相對定位，父親設置相對定位，兒子設置了絕對定位，那麽兒子是以父親為參考點

2. 父絕子絕

不僅僅是父相子絕，還可以父絕子絕，父固子絕 都是以父輩元素為參考點。

註意了：父絕子絕，沒有實戰意義，做站的時候不會出父絕子絕。因為絕對定位脫離標準統，影響頁面的布局。 相反 ‘父相子絕’ 在我們頁面布局中，是常用的布局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整位置信息。

3. 絕對定位的盒子無視父輩的padding

　 4. 絕對定位盒子居中

只有標準流下的盒子才能使用margin: 0 auto;

　　 當一個盒子浮動了，固定定位，絕對定位了，margin: 0 auto； 不能用了。

那如何實現絕對定位盒子居中呢？

position: absolute;

　　left: 50%;

　　margin-left:-元素寬度的一半，實現絕對定位盒子

三、固定定位 頁面中也是常用的

position:fixed;

　 top: 10px;

　 left: 20px;

固定當前的元素不會隨著頁面滾動而滾動，比如廣告等

特性：1. 脫標 2. 提升層級 3. 固定不變 不會隨頁面滾動而滾動

參考點：

　　設置固定定位，用top描述，那麽是以瀏覽器的左上角為參考點。

　　 用bottom描述，那麽是以瀏覽器的左下角為參考點。

作用：

　　　　1. 返回頂部欄

　　　　2. 固定導航欄

　　　　3. 小廣告

設置固定定位之後，一定要加top屬性和left屬性

制作導航欄固定的效果，給body設置導航欄的高度，來顯示下方圖片的整個內容

　　body{

　　　　padding-top:49px;

}

6.1.2.12 定位