如何利用好CSS粘性定位

瀏覽器對(duì) CSS粘性定位有著非常好的支持，但很多開(kāi)發(fā)者都沒(méi)有用過(guò)它。

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

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

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

我假設(shè)你們都知道什么事CSS定位，不過(guò)還是先簡(jiǎn)單回顧一下比較好：

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

static 、 relative 、 absolute 和 fixed之間主要的區(qū)別在于它們?cè)贒OM流中占用的空間。 static 和 relative 會(huì)保留它們?cè)谖臋n流中的自然空間，而 absolute 和 fixed 則不會(huì) —— 它們的空間被移除而且具有浮動(dòng)行為。

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

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

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

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

例：

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

探索粘性定位

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

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

這是為什么？

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

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

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

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

例：

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

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

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

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

CSS 粘性定位的示意圖：

粘性元素與粘性容器

查看在CodePen上的例子：

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

理解 CSS 的粘性行為

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

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

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

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

粘在底部？

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

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

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

完整示例：

HTML

CSS

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

我在開(kāi)發(fā)中常用它來(lái)粘貼摘要表，也會(huì)用在粘性頁(yè)腳導(dǎo)航上，這種方法非常適合。

瀏覽器支持

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

超過(guò)86%的瀏覽器支持粘性定位

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

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

廣告

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