首页 > 其他 > 详细

粘性定位

时间:2019-12-29 19:44:56      阅读:60      评论:0      收藏:0      [点我收藏+]

一.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视口回滚到阈值以下。

粘性定位

原文:https://www.cnblogs.com/zhang1568234/p/12115846.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!