position: sticky;粘性定位


MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

position:sticky;是粘性定位,新的定位方式,專門用於頁面滾動的時候的定位,可以方便實現吸頂條的效果。

粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之后為固定定位。

#one { position: sticky; top: 10px; }

在 viewport 視口滾動到元素 top 距離小於 10px 之前,元素為相對定位。之后,元素將固定在與頂部距離 10px 的位置,直到 viewport 視口回滾到閾值以下。

須指定top, right, bottom或left四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。

查看效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM