粘性定位


一.position值

  position一共有5種值,分別是static,relative,absolute,fixed,sticky。今天主要總結的是sticky。

二.sticky

  解釋:當position的值為sticky時,元素會根據正常文檔流進行定位。粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之后為固定定位。

  sticky的值有四個分別是top,right,buttom,left。必須指定這四個閾值中的一個,才可以使粘性定位生效,否則行為與其相對定位相同。

三.例子

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

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

四.效果演示

  http://demo1.xhuzhj.xyz/

 


免責聲明!

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



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