溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介：position:sticky是css定位新增屬性；可以說是static（沒有定位） 和 固定定位fixed 的結合；它主要用在對 scroll 事件的監聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到 sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當于fixed定位，固定到適當位置
講 sticky 定位之前，先說一下position 的其他定位，
absolute： 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過"left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed： 生成固定定位的元素，相對于瀏覽器窗口進行定位（老IE不支持），元素的位置通過"left", "top", "right" 以及 "bottom" 屬性進行規定。
relative： 生成相對定位的元素，相對于其正常位置進行定位，不脫離文檔流。
static：
默認值，沒有定位，元素出現在正常的文檔流中（忽略 top, bottom, left, right 或者
z-index 聲明）。inherit規定應該從父元素繼承 position 屬性的值。
sticky的使用：
#sticky-nav {
position: sticky;
top: 100px;
}設置 position:sticky 同時給一個 (top,bottom,right,left) 之一即可
使用條件：
父元素不能overflow:hidden或者overflow:auto屬性。
必須指定top、bottom、left、right4個值之一，否則只會處于相對定位
父元素的高度不能低于sticky元素的高度
sticky元素僅在其父元素內生效。
更多相關知識文章：
以上就是CSS 粘性定位 sticky 詳解的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
