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. 基于Quartz编写一个可复用的分布式调度任务管理WebUI组件

    前提 创业小团队,无论选择任何方案,都优先考虑节省成本.关于分布式定时调度框架,成熟的候选方案有XXL-JOB.Easy Scheduler.Light Task Scheduler和Elastic ...

  2. 程序开发中的术语，如IDE,OOP等等

    我们在开发程序过程中,会用到一些与编译有关的术语,比如:[编辑器.编译器.调试器.连接器,链接器.解释器,集成开发环境(Integrated Development Environment,IDE). ...

  3. 多线程学习笔记（四）---- Thread类的其他方法介绍

    一.wait和 sleep的区别 wait可以指定时间也可以不指定时间,而sleep必须指定时间: 在同步中时,对cpu的执行权和锁的处理不同: wait:释放执行权,释放锁:释放锁是为了别人noti ...

  4. pyspider_初始

    一.简介 1.1.简介 pyspider 是一个使用python编写,并且拥有强大功能web界面的爬虫框架. 强大的web界面可进行脚本编辑,任务监控,项目管理,结果查看等功能. pyspider支持 ...

  5. Python操作rabbitmq系列（一）

    从本文开始,接下来的内容,我们将讨论rabbitmq的相关功能.我的这些文章,最终是要实现一个项目(具体是什么暂不透露).前面每一篇,都是在为这个系统做准备.rabbitmq,是我们这个项目的关键部分 ...

  6. Struts2-学习笔记系列(5)-配置action

    配置包命名空间 实现了action就需要在struts中配置action.首先配置包属性: 需要注意的是:在框架进行包匹配的时候,按文档的从上到下的顺序进行匹配   <!--下面配置名为book ...

  7. Python Requests-学习笔记(7)-Cookies

    如果某个响应中包含一些Cookie,你可以快速访问它们: url = 'http://example.com/some/cookie/setting/url' r = requests.get(url ...

  8. hadoop(六)rsync远程同步|xsync集群分发(完全分布式准备三)|8

    前置环境准备:centos7克隆ip|机器名|映射关系|别名配置(hadoop完全分布式准备一)scp命令copy文件和配置(hadoop完全分布式准备二) rsync远程同步工具 优点 rsync主 ...

  9. 如何实现Jenkins 编译结果通知到QQ好友及QQ群组<很遗憾 2019年1月1日腾讯停止了webqq机器人的服务支持>

    Jenkins-NotifyQQ NotifyQQ 运行于Docker 本文介绍mac 环境下实现Jenkins编译结果QQ即时通知 Jenkins 安装使用及iOS自动化打包,邮件通知请参考本人博客 ...

  10. 【翻译】Java Array的排名前十方法(Top 10 Methods for Java Arrays)

    这里列举了Java Array 的前十的方法.他们在stackoverflow最大投票的问题. The following are top 10 methods for Java Array. The ...