6.1.2.12 定位
浮動,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 定位