2021-02-14 分類: 網(wǎng)站建設(shè)
瀏覽器對 CSS粘性定位有著非常好的支持,但很多開發(fā)者都沒有用過它。
究其原因有兩個:
第一,受到瀏覽器的良好支持需要漫長的等待:瀏覽器的支持往往需要很長的時間才能完成,到時候它的功能已經(jīng)被人們遺忘了。
第二個原因是很多開發(fā)者并不能完全理解其工作原理背后的邏輯,這就是我的切入點。
我假設(shè)你們都知道什么事CSS定位,不過還是先簡單回顧一下比較好:
在3年前,有四種 CSS 定位: static、 relative、 absolute 和fixed。
static 、 relative 、 absolute 和 fixed之間主要的區(qū)別在于它們在DOM流中占用的空間。 static 和 relative 會保留它們在文檔流中的自然空間,而 absolute 和 fixed 則不會 —— 它們的空間被移除而且具有浮動行為。
正如我下面將要解釋的那樣,新的粘性定位與所有類型都有相似之處。
我的第一個粘性定位
可能很多人都玩過粘性定位。我已經(jīng)接觸過一段時間了,直到我意識到自己并不是完全理解它。
在第一個例子中,大家很容易就能看明白 當視口到達定義的位置時,元素會被粘住。
例:
但問題是,它有時候能用,而有時卻不起作用。 當它工作時,元素會粘住,但在滾動到其他部分,它會停止粘貼。 作為一個靠 CSS 混飯吃的人,我完全不能接受自己對這個問題是不理解的,所以我決定把粘性位置徹底搞清楚。
探索粘性定位
在擺弄它的過程中,我很快就注意到了:當一個具有 position:sticky 樣式的元素被包裝,且它是包裝元素中唯一的元素時,這個被定義為 position:sticky 的元素就不會粘住。
當我在包裝元素中添加更多元素時,它就能開始正常工作了。
這是為什么?
這是因為當一個元素被賦予 position: sticky 樣式時,粘性項目的容器是它可以粘貼的唯一區(qū)域。 粘性元素沒有任何要浮動的元素,因為它只能浮動在同級元素上,作為唯一的子元素,它不能浮動。
怎樣才能讓 CSS 粘性定位起作用
CSS 粘性定位有兩個主要部分,粘性元素(sticky item)和 粘性容器(sticky container)。
粘性元素 —— 是我們用位置定義的 position: sticky 樣式。 當視口位置與位置定義匹配時,該元素將會浮動,例如: top: 0px 。
例:
粘性容器 —— 是包裝粘性元素的 HTML 元素。 這是粘性元素可以浮動的大區(qū)域。
當你定義一個具有 position:sticky 樣式的元素時,父元素會被自動定義為粘性容器!
記住這一點非常重要! 容器是粘性元素的范圍,并且該元素無法離開其所在的粘性容器。
這就是為什么在前面的例子中,粘性元素沒有被粘住的原因:這個粘性元素是粘性容器中唯一的子元素。
CSS 粘性定位的示意圖:
粘性元素與粘性容器
查看在CodePen上的例子:
https://codepen.io/elad2412/pen/QYLEdK
理解 CSS 的粘性行為
正如我前面說過的那樣,CSS 粘性定位的行為與所有其他 CSS 定位不一樣,但從另一個角度來說,它們也有一些相似之處。我來解釋一下:
相對(或靜態(tài))—— 粘性定位元素類似于相對和靜態(tài)位置,因為它保留了 DOM 中的自然間隙(留在流中)。
固定 —— 當元素被粘住時,它的行為與 position: fixed 完全相同,浮動在與視口的相同位置,并從流中移除。
絕對 —— 在粘貼區(qū)域的末尾,元素會停止,并堆疊在另一個元素的頂部,就像一個絕對定位的元素被放在一個 position: relative 容器內(nèi)的行為。
粘在底部?
在大多數(shù)情況下,您可以使用粘性定位將元素粘貼到頂部,如下所示:
這正是它被設(shè)計的初衷,而在此之前,只能使用JavaScript完成這個功能。
但你也可以使用它把元素粘到底部。 這意味著你可以把頁腳定義為粘性,并且在向下滾動時使它看起來總是被粘在底部。 當?shù)竭_粘性容器的末端時,元素會停在它的自然位置。 最好是在以粘性容器底部為自然位置的元素上使用它。
完整示例:
HTML
CSS
去CodePen查看演示效果:https://codepen.io/elad2412/pen/MZZVjw
我在開發(fā)中常用它來粘貼摘要表,也會用在粘性頁腳導(dǎo)航上,這種方法非常適合。
瀏覽器支持
超過86%的瀏覽器支持粘性定位
分享文章:如何利用好CSS粘性定位
標題路徑:http://m.rwnh.cn/news22/100822.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、軟件開發(fā)、網(wǎng)站設(shè)計、小程序開發(fā)、商城網(wǎng)站、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容