粘性定位


一.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