千鋒前端浠浠呀老師HTML+CSS教程,零基礎(chǔ)web前端開(kāi)發(fā)入門(mén)必看視頻
2023-07-19 10:33 作者:愛(ài)吃蘋(píng)果籽 | 我要投稿

一、?定位 ?position
凡是加了定位的元素,都可以設(shè)置坐標(biāo)屬性(top:100px;?bottom:100px;?left?right)
當(dāng)上遇到下,聽(tīng)上的
當(dāng)左遇到右,聽(tīng)左的
?
脫標(biāo),脫離標(biāo)準(zhǔn)流(文檔流)
?
1、static??靜態(tài)定位 ??不定位 ??默認(rèn)值
2、absolute?絕對(duì)定位
脫標(biāo)不占位
相對(duì)包含塊定位
包含塊,距離自己最近的定位的盒子,逐層向外查找,如果都沒(méi)有就相對(duì)窗口
如果父盒子已經(jīng)有了絕對(duì)定位,就不需要改成相對(duì)定位;
如果父盒子什么定位都沒(méi)有,就加相對(duì)定位,因?yàn)橄鄬?duì)定位不脫標(biāo),對(duì)自己沒(méi)有任何影響
子絕父相(如果子盒子有了絕對(duì)定位,請(qǐng)給父盒子添加相對(duì)定位,這樣就可以相對(duì)父盒子定位了)
若果不寫(xiě)坐標(biāo),脫標(biāo)留原位(原來(lái)標(biāo)準(zhǔn)流的位置)
?
3、relative?相對(duì)定位
不脫標(biāo)占位
相對(duì)自己定位
?
4、sticky?粘性定位
吸頂效果
相當(dāng)于是相對(duì)定位和固定定位的結(jié)和
不脫標(biāo)占位
需要結(jié)合坐標(biāo)使用,要有滾動(dòng)條
?
5、fixed???固定定位
相對(duì)窗口定位
脫標(biāo)不占位
?
標(biāo)簽: