css-position之fixed  vs sticky

fixed（固定定位）

元素相对于浏览器窗口是固定的，即使是窗口滚动，元素也是固定的

sticky（粘性定位）

基于用户滚定动来进行定位的，相当于relative定位 fixed定位的结合体

当未超过阈值的时候，他的行为就像relative，当超过特定阈值是他的行为就像fixed。

阈值是left，right，top，bottom（必须制定其一，才能使粘性定位生效，否则其行为与relative相同）

sticky事例：

1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <title>sticky</title>

 6 <style>

 7 div .sticky {

 8 

 9   position: sticky;

10   top: 0;

11   padding: 5px;

12   background-color: #cae8ca;

13   border: 2px solid #4CAF50;

14 }

15 </style>

16 </head>

17 <body>

18

19 <p>尝试滚动页面。</p>

20

21

22 <div class="sticky">我是粘性定位!</div>

23

24 <div style="padding-bottom:2000px">

25   <p>滚动我</p>

26   <p>来回滚动我</p>

27   <p>滚动我</p>

28   <p>来回滚动我</p>

29   <p>滚动我</p>

30   <p>来回滚动我</p>

31 </div>

32

33 </body>

34 </html>

css-position之fixed vs sticky的更多相关文章

  1. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  2. CSS中position属性介绍（新增sticky）

    position的含义是指定类型,取值类型可以有:static.relative.absolute.fixed.inherit 和 sticky,这里sticky是CSS3新发布的一个属性. 1.po ...

  3. css position sticky All In One

    css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...

  4. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  5. 解决IE6下Position：fixed问题(只用css)

    在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...

  6. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

  8. fixed和sticky

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...

  9. CSS Position（定位）

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  10. css position 5种不同的值的用法

    position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky ...

随机推荐

  1. 【电商】性能测试网站搭建：XAMPP1.8+DBShop1.3

    1.安装准备 1.1软件版本 XAMPP的版本:XAMPP 1.8.2 DBShop的版本:DBShop 1.3   1.2.安装环境 我的环境:win10 win7,win10都可以运行的,安装步骤 ...

  2. node+express+mysql实现简单的数据增删改查

    前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp  新建一个以ejs为模板的expre ...

  3. go 名词备注

    1.Protobuf Google Protocol Buffer(简称 Protobuf)是一种轻便高效的结构化数据存储格式,平台无关.语言无关.可扩展,可用于通讯协议和数据存储等领域.

  4. JUC——检视阅读

    JUC--检视阅读 参考资料 JUC知识图参考 JUC框架学习顺序参考 J.U.C学习总结参考,简洁直观 易百并发编程,实践操作1,不推荐阅读,不及格 JUC文章,带例子讲解,可以学习2 Doug L ...

  5. python3（三十） Enum

    """ """ __author__ = 'shaozhiqi' # 当我们需要定义常量时,一个办法是用大写变量通过整数来定义,例如月份: ...

  6. Anaconda下的juputer notebook 更改起始目录的方法【填坑】

    出来的结果是这样的,我们很不习惯,找文件.保存文件很麻烦 这里的快捷方式可以打开 jupyter notebook ,但是如果你没配置环境变量的话,在cmd 中 输入命令 jupyter notebo ...

  7. Jackson优化使用实例

    Jackson优化使用实例 博客分类: Java综合   JSON的三种处理方式  Jackson提供了三种可选的JSON处理方法(一种方式及其两个变型): 流式 API:(也称为"增量分析 ...

  8. 数字电路技术之触发器（基本RS触发器）

    一.触发器的知识 1.触发器是构成时序逻辑电路的基本逻辑部件. 2.[1]它有两个稳定的状态:0状态和1状态:      [2]在不同的输入情况下,它可以被置成0状态或1状态:      [3]当输入 ...

  9. CTE(With As)

    WITH tabdate(dt) AS ( FROM dual UNION ALL FROM tabdate WHERE dt ) SELECT * FROM TabDate ; 一.With Tab ...

  10. Django系列操作

    每次用到都去百度找....找的还不行~~得自己改~~耗时耗力虽然不难~~~直接贴代码记录下方便自己用~~~~ Django之分页 定义成一个块,直接引用到对应的位置即可... <div clas ...