免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何利用好CSS粘性定位

2021-02-14    分類: 網(wǎng)站建設(shè)

瀏覽器對 CSS粘性定位有著非常好的支持,但很多開發(fā)者都沒有用過它。

究其原因有兩個(gè):

第一,受到瀏覽器的良好支持需要漫長的等待:瀏覽器的支持往往需要很長的時(shí)間才能完成,到時(shí)候它的功能已經(jīng)被人們遺忘了。

第二個(gè)原因是很多開發(fā)者并不能完全理解其工作原理背后的邏輯,這就是我的切入點(diǎn)。


我假設(shè)你們都知道什么事CSS定位,不過還是先簡單回顧一下比較好:

在3年前,有四種 CSS 定位: static、 relative、 absolute 和fixed。

static 、 relative 、 absolute 和 fixed之間主要的區(qū)別在于它們在DOM流中占用的空間。 static 和 relative 會保留它們在文檔流中的自然空間,而 absolute 和 fixed 則不會 —— 它們的空間被移除而且具有浮動(dòng)行為。

正如我下面將要解釋的那樣,新的粘性定位與所有類型都有相似之處。

我的第一個(gè)粘性定位

可能很多人都玩過粘性定位。我已經(jīng)接觸過一段時(shí)間了,直到我意識到自己并不是完全理解它。

在第一個(gè)例子中,大家很容易就能看明白 當(dāng)視口到達(dá)定義的位置時(shí),元素會被粘住。

例:



但問題是,它有時(shí)候能用,而有時(shí)卻不起作用。 當(dāng)它工作時(shí),元素會粘住,但在滾動(dòng)到其他部分,它會停止粘貼。 作為一個(gè)靠 CSS 混飯吃的人,我完全不能接受自己對這個(gè)問題是不理解的,所以我決定把粘性位置徹底搞清楚。

探索粘性定位

在擺弄它的過程中,我很快就注意到了:當(dāng)一個(gè)具有 position:sticky 樣式的元素被包裝,且它是包裝元素中唯一的元素時(shí),這個(gè)被定義為 position:sticky 的元素就不會粘住。



當(dāng)我在包裝元素中添加更多元素時(shí),它就能開始正常工作了。

這是為什么?

這是因?yàn)楫?dāng)一個(gè)元素被賦予 position: sticky 樣式時(shí),粘性項(xiàng)目的容器是它可以粘貼的唯一區(qū)域。 粘性元素沒有任何要浮動(dòng)的元素,因?yàn)樗荒芨?dòng)在同級元素上,作為唯一的子元素,它不能浮動(dòng)。

怎樣才能讓 CSS 粘性定位起作用

CSS 粘性定位有兩個(gè)主要部分,粘性元素(sticky item)和 粘性容器(sticky container)。

粘性元素 —— 是我們用位置定義的 position: sticky 樣式。 當(dāng)視口位置與位置定義匹配時(shí),該元素將會浮動(dòng),例如: top: 0px 。

例:



粘性容器 —— 是包裝粘性元素的 HTML 元素。 這是粘性元素可以浮動(dòng)的大區(qū)域。

當(dāng)你定義一個(gè)具有 position:sticky 樣式的元素時(shí),父元素會被自動(dòng)定義為粘性容器!

記住這一點(diǎn)非常重要! 容器是粘性元素的范圍,并且該元素?zé)o法離開其所在的粘性容器。

這就是為什么在前面的例子中,粘性元素沒有被粘住的原因:這個(gè)粘性元素是粘性容器中唯一的子元素。

CSS 粘性定位的示意圖:



粘性元素與粘性容器

查看在CodePen上的例子:

https://codepen.io/elad2412/pen/QYLEdK

理解 CSS 的粘性行為

正如我前面說過的那樣,CSS 粘性定位的行為與所有其他 CSS 定位不一樣,但從另一個(gè)角度來說,它們也有一些相似之處。我來解釋一下:

相對(或靜態(tài))—— 粘性定位元素類似于相對和靜態(tài)位置,因?yàn)樗A袅?DOM 中的自然間隙(留在流中)。

固定 —— 當(dāng)元素被粘住時(shí),它的行為與 position: fixed 完全相同,浮動(dòng)在與視口的相同位置,并從流中移除。

絕對 —— 在粘貼區(qū)域的末尾,元素會停止,并堆疊在另一個(gè)元素的頂部,就像一個(gè)絕對定位的元素被放在一個(gè) position: relative 容器內(nèi)的行為。

粘在底部?

在大多數(shù)情況下,您可以使用粘性定位將元素粘貼到頂部,如下所示:



這正是它被設(shè)計(jì)的初衷,而在此之前,只能使用JavaScript完成這個(gè)功能。

但你也可以使用它把元素粘到底部。 這意味著你可以把頁腳定義為粘性,并且在向下滾動(dòng)時(shí)使它看起來總是被粘在底部。 當(dāng)?shù)竭_(dá)粘性容器的末端時(shí),元素會停在它的自然位置。 最好是在以粘性容器底部為自然位置的元素上使用它。

完整示例:

HTML



CSS



去CodePen查看演示效果:https://codepen.io/elad2412/pen/MZZVjw

我在開發(fā)中常用它來粘貼摘要表,也會用在粘性頁腳導(dǎo)航上,這種方法非常適合。

瀏覽器支持

  • 除了老 IE 瀏覽器外,所有流行的現(xiàn)代瀏覽器都支持粘性定位。
  • 如果用在 Safari 瀏覽器上,你需要添加 -webkit 前綴。



超過86%的瀏覽器支持粘性定位

分享文章:如何利用好CSS粘性定位
標(biāo)題路徑:http://m.newbst.com/news22/100822.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站軟件開發(fā)網(wǎng)站設(shè)計(jì)小程序開發(fā)商城網(wǎng)站服務(wù)器托管

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司