首頁技術(shù)文章正文

怎樣讓盒子固定在屏幕的某個(gè)位置不動(dòng)?

更新時(shí)間:2022-01-11 來源:黑馬程序員 瀏覽量:

想要實(shí)現(xiàn)盒子是固定屏幕某個(gè)位置,滾動(dòng)屏幕該盒子位置依然保持不變。浮動(dòng)可以讓多個(gè)塊級(jí)盒子一行沒有縫隙排列顯示,經(jīng)常用于橫向排列盒子。定位則是可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置,并且可以壓住其他盒子。浮動(dòng)無法快速實(shí)現(xiàn),此時(shí)就需要定位來實(shí)現(xiàn)。

1.定位的組成

定位:將盒子定在某一個(gè)位置,所以定位也是在擺放盒子,按照定位的方式移動(dòng)盒子。

定位= 定位模式+邊偏移。

定位模式用于指定一個(gè)元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

2. 定位模式

定位模式?jīng)Q定元素的定位方式,它通過CSS 的position屬性來設(shè)置,其值可以分為四個(gè):

 css定位模式

3.邊偏移

邊偏移就是定位的盒子移動(dòng)到最終位置。有top、bottom、left 和right 4 個(gè)屬性。

邊偏移

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

靜態(tài)定位是元素的默認(rèn)定位方式,無定位的意思。語法如下:

選擇器{ position: static; }

  靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置,它沒有邊偏移

  靜態(tài)定位在布局時(shí)很少用到

5.相對(duì)定位relative

相對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它原來的位置來說的(自戀型)。語法如下:

選擇器{ position: relative; }

相對(duì)定位的特點(diǎn):

它是相對(duì)于自己原來的位置來移動(dòng)的(移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來的位置)。

原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。

因此,相對(duì)定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)?。?!?/p>

6.絕對(duì)定位absolute

絕對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它祖先元素來說的(拼爹型)。語法:

選擇器{ position: absolute; }

絕對(duì)定位的特點(diǎn):

  如果沒有祖先元素或者祖先元素沒有定位,則以瀏覽器為準(zhǔn)定位(Document 文檔)。

  如果祖先元素有定位(相對(duì)、絕對(duì)、固定定位),則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。

  絕對(duì)定位不再占有原先的位置。(脫標(biāo))

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





猜你喜歡:

怎樣對(duì)網(wǎng)頁標(biāo)簽進(jìn)行精準(zhǔn)定位?

css絕對(duì)定位和相對(duì)定位【CSS定位介紹】

如何設(shè)置盒子模型的外邊距?

如何獲取鼠標(biāo)在盒子中的位置?

黑馬程序員HTML&前端與移動(dòng)開發(fā)高手班課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!