本節簡介:固定定位,相對定位和絕對定位的對比及代碼編寫方式等。
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
絕對定位:position:absolute 根據父級位置進行偏移,父級必須有定位 原有位置不存在
相對定位:position:relative 根據自己位置偏移 ,原有位置依然存在
讓圖形固定在正中心位置 例:position:fixed; left:50% top:50% margin-top:-(圖形高度一半) margin-left:-(圖形寬度一半)
固定定位 position:fixed 根據瀏覽器窗口進行偏移 ,原有位置不在
absolute 不停地尋找父級,所以,父級宜定relative
三種定位布局方式: (固定定位)position:fixed ;;; (相對定位)position:relative ;;; (絕對定位)position:absolute ....
fixed:居中對齊:top:50%,margin-top:高度得一半; left:50%,margin-left:寬度得一半
子級要絕對定位的時候,父級的position屬性用relative
absolute定位找父級,如果父級沒定義定位,則再找上一級的父級,如果沒有再想上找,如果都沒有就以瀏覽器窗口定位
相對定位 position:relative 固定定位position:fixed 絕對定位position:absolute
相對定位 position:relative 固定定位position:fixed 絕對定位position:absolute
absolute定位是針對父級元素的定位,設置不同元素的等級,只要添加“index”屬性
相對定位:根據自己原有的位置進行偏移,原有位置依然存在
進行位置定位時,“top”和“left”發揮作用是基于定位屬性的(position:fixed)