定位流

定位流分類

1.相對定位

定義:相對于自己以前在標(biāo)準(zhǔn)中的位置來移動。

注意點(diǎn):

1.相對定位是不會脫離標(biāo)準(zhǔn)流的,會繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間。

2.在相對定位中同一方向上的定位只能使用一個(gè)。

3.由于相對定位是不會脫離標(biāo)準(zhǔn)流的,所以相對定位是區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的。

4.由于相對是不會脫離標(biāo)準(zhǔn)流的,并且相對定位的元素會占用標(biāo)準(zhǔn)流的位置,所以當(dāng)給相對定位的元素設(shè)置margin/paddingdeng屬性時(shí)會影響到標(biāo)準(zhǔn)流的布局。

相對定位應(yīng)用場景

1.用于對元素進(jìn)行微調(diào)。

2.配合絕對定位來使用

2.絕對定位

定義:絕對定位是相對于body來定位的。

注意點(diǎn):

1.絕對定位的元素會脫離標(biāo)準(zhǔn)流的。

2.絕對定位是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的。

絕對定位參考點(diǎn):

規(guī)律:

1.默認(rèn)情況下絕對定位的元素,無論有沒有祖先元素(父元素,爺爺元素...),都會以body作為參考點(diǎn)

2.如果一個(gè)絕對定位有祖先元素,并且祖先元素也是定位流,那么這個(gè)絕對定位元素就會以定位流的那個(gè)祖先元素作為參考點(diǎn)。

2.1只要是這個(gè)絕對定位元素的祖先元素都可以。

2.2上面的定位流指的是絕對定位/相對定位/固定定位。

2.3 定位流中只有靜態(tài)定位不可以作為定位流來定位。

3.如果一個(gè)絕對定位的元素有多個(gè)祖先元素,并且祖先元素有多個(gè)元素都是定位流,那么那個(gè)絕對定位的元素就會以離它最近的那個(gè)定位流的祖先元素作為參考點(diǎn)。?

注意點(diǎn):

1.如果一個(gè)絕對定位的元素時(shí)以body作為參考點(diǎn),那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn),并不是以整個(gè)網(wǎng)頁的寬度和高度作為參考點(diǎn)的。

2.一個(gè)絕對定位的元素會忽略祖先元素的padding

如何讓絕對定位的元素水平居中?

1.只需要設(shè)置絕對定位元素的left:50%;

2.然后設(shè)置絕對定位元素的margin-left:-元素寬度的一半px;

固定定位:

1.背景定位可以讓背景圖片不隨著滾動條的滾動而滾動,而固定定位可以讓某個(gè)盒子不隨著滾動條的滾動而滾動。

注意點(diǎn):

1.固定定位的元素是脫離標(biāo)準(zhǔn)流的,不會占用標(biāo)準(zhǔn)流中的空間

2.固定定位和絕對定位一樣不區(qū)分行內(nèi)元素/塊級元素。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,121評論 1 92
  • 網(wǎng)頁布局方式——定位流 標(biāo)簽(空格分隔): H5+CSS [TOC] 網(wǎng)頁布局方式——定位流 定位流分類 相對定位...
    袁俊亮技術(shù)博客閱讀 712評論 0 3
  • ## 定位流 # 相對定位 # 絕對定位 # 子絕父相 # 固定定位 # z-index屬性 定位的元素會蓋住沒有...
    KsKison閱讀 510評論 0 0
  • 一、定位流分類 1.1相對定位1.2絕對定位1.3固定定位1.4靜態(tài)定位 二、什么是相對定位? 2.1相對定位就是...
    Miss一曦閱讀 281評論 0 1
  • 定位流分類 相對定位->relative 絕對定位->absolute 固定定位->fix...
    白的嚇人閱讀 414評論 0 0

友情鏈接更多精彩內(nèi)容