MAIN CONTENT
資訊專欄INFORMATION COLUMN
摘要：怎樣才能讓粘性定位起作用粘性定位有兩個主要部分，粘性元素和粘性容器。這是粘性元素可以浮動的最大區域。最好是在以粘性容器底部為自然位置的元素上使用它。
翻譯：瘋狂的技術宅
原文：https://medium.com/@elad/css-...
本文首發微信公眾號：jingchengyideng
歡迎關注，每天都給你推送新鮮的前端技術文章
瀏覽器對 CSS粘性定位有著非常好的支持，但很多開發者都沒有用過它。
究其原因有兩個：
第一，受到瀏覽器的良好支持需要漫長的等待：瀏覽器的支持往往需要很長的時間才能完成，到時候它的功能已經被人們遺忘了。
第二個原因是很多開發者并不能完全理解其工作原理背后的邏輯，這就是我的切入點。
我假設你們都知道什么事CSS定位，不過還是先簡單回顧一下比較好：
在3年前，有四種 CSS 定位： static、 relative、 absolute 和 fixed。
static 、 relative 、 absolute 和 fixed之間主要的區別在于它們在DOM流中占用的空間。 static 和 relative 會保留它們在文檔流中的自然空間，而 absolute 和 fixed 則不會 —— 它們的空間被移除而且具有浮動行為。
正如我下面將要解釋的那樣，新的粘性定位與所有類型都有相似之處。
我的第一個粘性定位可能很多人都玩過粘性定位。我已經接觸過一段時間了，直到我意識到自己并不是完全理解它。
在第一個例子中，大家很容易就能看明白 當視口到達定義的位置時，元素會被粘住。
例：
.some-component{
position: sticky;
top: 0;
}
但問題是，它有時候能用，而有時卻不起作用。 當它工作時，元素會粘住，但在滾動到其他部分，它會停止粘貼。 作為一個靠 CSS 混飯吃的人，我完全不能接受自己對這個問題是不理解的，所以我決定把粘性位置徹底搞清楚。
探索粘性定位在擺弄它的過程中，我很快就注意到了：當一個具有 position:sticky 樣式的元素被包裝，且它是包裝元素中唯一的元素時，這個被定義為 position:sticky 的元素就不會粘住。
SOME CONTENT
當我在包裝元素中添加更多元素時，它就能開始正常工作了。
這是為什么？這是因為當一個元素被賦予 position: sticky 樣式時，粘性項目的容器是它可以粘貼的唯一區域。 粘性元素沒有任何要浮動的元素，因為它只能浮動在同級元素上，作為唯一的子元素，它不能浮動。
怎樣才能讓 CSS 粘性定位起作用CSS 粘性定位有兩個主要部分，粘性元素（sticky item）和 粘性容器（sticky container）。
粘性元素 —— 是我們用位置定義的 position: sticky 樣式。 當視口位置與位置定義匹配時，該元素將會浮動，例如： top: 0px 。
例：
.some-component{
position: sticky;
top: 0px;
}
粘性容器 —— 是包裝粘性元素的 HTML 元素。 這是粘性元素可以浮動的最大區域。
當你定義一個具有 position:sticky 樣式的元素時，父元素會被自動定義為粘性容器！
記住這一點非常重要！ 容器是粘性元素的范圍，并且該元素無法離開其所在的粘性容器。
這就是為什么在前面的例子中，粘性元素沒有被粘住的原因：這個粘性元素是粘性容器中唯一的子元素。
CSS 粘性定位的示意圖：
粘性元素與粘性容器
查看在CodePen上的例子：
https://codepen.io/elad2412/p...
理解 CSS 的粘性行為正如我前面說過的那樣，CSS 粘性定位的行為與所有其他 CSS 定位不一樣，但從另一個角度來說，它們也有一些相似之處。我來解釋一下：
相對（或靜態）—— 粘性定位元素類似于相對和靜態位置，因為它保留了 DOM 中的自然間隙（留在流中）。
固定 —— 當元素被粘住時，它的行為與 position: fixed 完全相同，浮動在與視口的相同位置，并從流中移除。
絕對 —— 在粘貼區域的末尾，元素會停止，并堆疊在另一個元素的頂部，就像一個絕對定位的元素被放在一個 position: relative 容器內的行為。
在大多數情況下，您可以使用粘性定位將元素粘貼到頂部，如下所示：
.component{
position: sticky;
top: 0;
}
這正是它被設計的初衷，而在此之前，只能使用JavaScript完成這個功能。
但你也可以使用它把元素粘到底部。 這意味著你可以把頁腳定義為粘性，并且在向下滾動時使它看起來總是被粘在底部。 當到達粘性容器的末端時，元素會停在它的自然位置。 最好是在以粘性容器底部為自然位置的元素上使用它。
完整示例：
HTMLCSSHEADER MAIN CONTENT
.main-footer{
position: sticky;
bottom: 0;
}
去CodePen查看演示效果：https://codepen.io/elad2412/p...
我在開發中常用它來粘貼摘要表，也會用在粘性頁腳導航上，這種方法非常適合。
瀏覽器支持除了老 IE 瀏覽器外，所有流行的現代瀏覽器都支持粘性定位。
如果用在 Safari 瀏覽器上，你需要添加 -webkit 前綴。
position: -webkit-sticky; /* Safari */ position: sticky;最后的話
本文到此就結束了，我希望你能喜歡這篇文章，并從我的經驗中學習到一些東西。
如果你喜歡這篇文章，我會非常感謝你的掌聲和分享 :-)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117331.html
摘要：怎樣才能讓粘性定位起作用粘性定位有兩個主要部分，粘性元素和粘性容器。這是粘性元素可以浮動的最大區域。最好是在以粘性容器底部為自然位置的元素上使用它。 翻譯：瘋狂的技術宅原文：https://medium.com/@elad/css-... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章 瀏覽器對 CSS粘性定位有著非常好的支持，但很多...
摘要：生效規則須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且和同時設置時，生效的優先級高，和同時設置時，的優先級高。設定為元素的任意父節點的屬性必須是，否則不會生效。 簡介 前面寫了一篇文章講解了position常用的幾個屬性：《CSS基礎篇-- position屬性講解》一般都知道下面幾個常用的： { position: static; position: r...
摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。 標準 根據MDN文檔，CS...
摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。 標準 根據MDN文檔，CS...
摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
閱讀 1585·2021-09-30 09:47
閱讀 3581·2021-09-22 15:05
閱讀 2829·2021-08-30 09:44
閱讀 3617·2019-08-30 15:55
閱讀 1365·2019-08-30 13:08
閱讀 1322·2019-08-29 16:40
閱讀 544·2019-08-29 12:45
閱讀 1379·2019-08-29 11:25
