關(guān)于position定位

介紹position的幾種屬性

position屬性有以下幾種:

  • 相對(duì)定位(relative)
  • 絕對(duì)定位(absolute)
  • 靜態(tài)定位(static)
  • 固定定位(fixed)

1. 相對(duì)定位(relative)

  • 相對(duì)定位是相對(duì)于原來(lái)自己以前在標(biāo)準(zhǔn)流中的位置來(lái)移動(dòng)。relative表現(xiàn)和static一樣,除非添加在一個(gè)相對(duì)定位position:relative元素設(shè)置top\right\bottom\left屬性才會(huì)偏離正常位置。

  • 相對(duì)定位不脫離文檔流,會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占有一份空間。

  • 由于相對(duì)定位不脫離文檔流,所以在相對(duì)定位中是區(qū)分塊級(jí)元素和行內(nèi)元素的。

  • 相對(duì)定位同一方向的定位熟悉只能有一個(gè)(垂直和水平方向).

  • 使用margin/padding等屬性會(huì)影響到標(biāo)準(zhǔn)流的布局。

  • 相對(duì)定位的應(yīng)用場(chǎng)景:用于對(duì)元素進(jìn)行微調(diào);配合絕對(duì)定位來(lái)使用。

2. 絕對(duì)定位(absolute)

  • 絕對(duì)定位和固定定位相似,但是它不是相對(duì)于視窗,而是相對(duì)于最近的position祖先元素。

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

  • 如果一個(gè)絕對(duì)定位的元素有祖先元素,并且祖先元素中有多個(gè)元素都是定位流,那么這個(gè)絕對(duì)定位的元素就會(huì)以離他最近的那個(gè)定位流的祖先元素為參考點(diǎn)。

  • 如果絕對(duì)定位元素沒(méi)有定位流祖先元素,那么它是相對(duì)于文檔的body元素定位,并且會(huì)隨著頁(yè)面的滾動(dòng)而移動(dòng)。

  • 注意的是一個(gè)position元素指的是(絕對(duì)定位、相對(duì)定位、靜態(tài)定位),不包括固定定位。

  • 絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的。

  • 在企業(yè)開發(fā)中一般不單獨(dú)使用相對(duì)定位和絕對(duì)定位,而是結(jié)合一起使用。一般“子絕父相”,即子元素用絕對(duì)定位,父元素用相對(duì)定位。但凡說(shuō)到定位或一個(gè)盒子覆蓋在另一個(gè)盒子上都要想到“子絕父相”。

3. 靜態(tài)定位(static)

static是默認(rèn)值,表示不會(huì)被特殊定位。

4. 固定定位(fixed)

  1. 固定定位position:fixed相對(duì)于視窗來(lái)定位,也就是說(shuō)元素不會(huì)隨著頁(yè)面滾動(dòng)而發(fā)生變化,元素還是停留在原來(lái)位置。

  2. 可以使用top\right\bottom\left屬性

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

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

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

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,185評(píng)論 1 92
  • 介紹position的幾種屬性 position屬性有以下幾種: 相對(duì)定位(relative) 絕對(duì)定位(abso...
    BlueLeaf1閱讀 771評(píng)論 0 3
  • 大家好,我是IT修真院深圳分院第06期學(xué)員,一枚正直善良的web程序員。 今天給大家分享一下,修真院官網(wǎng) CSS任...
    不二先森zZ閱讀 4,513評(píng)論 0 2
  • position屬性比起其他的基礎(chǔ)屬性來(lái)講要復(fù)雜一些,我在這試著把里面的門道全部總結(jié)出來(lái)。 目前position有...
    microkof閱讀 3,840評(píng)論 3 5
  • 學(xué)習(xí)建議 定位、浮動(dòng)是 CSS 核心知識(shí)點(diǎn),必須熟練掌握。 1.文檔流的概念指什么?有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,160評(píng)論 0 3

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