今天分析下css中的各種定位
position用于定義定位常侦,他的值分別為static星爪,relative疆栏,fixed曾掂,absolute,sticky壁顶,最常用的也就是absolute和relative珠洗,一般都是子絕父相
1、static 默認(rèn)值
設(shè)置 position: static; 的元素不會以任何特殊方式定位若专;它是始終根據(jù)頁面的正常流進(jìn)行定位:同時靜態(tài)定位的元素不受 top许蓖、bottom、left 和 right 屬性的影響。
2膊爪、relative 相對定位
參考自己本身的位置自阱,不會脫離文檔流,文字不能被遮擋
?3米酬、fixed 固定定位
參考瀏覽器的窗口沛豌,不會跟隨滾動條的滾動而滾動,脫離文檔流赃额,寬度自適應(yīng)的時候加派,寬度不顯示,可以通過設(shè)置 width:100%
4跳芳、absolute 絕對定位
參考有定位屬性(除了 static)的祖先元素,定位元素通過一層一層向上找芍锦,找到有定位的祖先元
素,如果找到 body 依然沒有找到有定位的祖先元素飞盆,參考瀏覽器窗口(子絕父相)醉旦,脫離文檔
流,且文字能被遮擋桨啃,塊級元素設(shè)置margin:0 auto;會失效车胡,內(nèi)聯(lián)元素設(shè)置定位轉(zhuǎn)換成塊元素
5、sticky??粘性定位
參考瀏覽器的窗口照瘾,沒有達(dá)到 top 值之前正常顯示匈棘,達(dá)到 top 值之后類似于固定定位,不會跟
隨滾動條滾動而滾動