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. 28. 实现 strStr()

    d地址:https://leetcode-cn.com/problems/implement-strstr/ <?php /** 实现 strStr() 函数. 给定一个 haystack 字符 ...

  2. 基于Quartz编写一个可复用的分布式调度任务管理WebUI组件

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

  3. div实现富文本编辑框

    ocument.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令参 ...

  4. 第一讲：Git分区，配置与日志

    前言 曾经听到过这样一句话:不会git就不要敲代码了.细细品味确实有其中的道理,可能是当事人代码被强行覆盖后的叹息吧! 因此,为了避免这种情况,接下来我们就一起来好好学习git的相关知识吧!不怕你不会 ...

  5. ln 软连接与硬连接

                                                                                                        ...

  6. JS入门系列(2)-原型-实例属性

    下面的例子中,在构造器内部定义了like,然后再原型上也定义了like.通过下面的测试表明: 在构造器内部创建的实例方法会阻挡原型上定义的同名方法 初始化操作的优先级如下: 首先,通过原型给对象实例添 ...

  7. centos7 ip/映射/机器名变更/克隆(克隆后配置修改)|2

    1.  查看主机名,三个命令都可以 # hostname # uname -n # cat  /proc/sys/kernel/hostname 2.    使用 vi /etc/hostname 文 ...

  8. Git应用详解第七讲：Git refspec与远程分支的重要操作

    前言 前情提要:Git应用详解第六讲:Git协作与Git pull常见问题 这一节来介绍本地仓库与远程仓库的分支映射关系:git refspec.彻底弄清楚本地仓库到底是如何与远程仓库进行联系的. 一 ...

  9. 发布公开的pod

    发布公开的pod 方便项目 通过cocoapods 使用,便于版本版本管理,下面是简单步奏: 0.首次操作先要注册Trunk: pod trunk register zhujin001xb@163.c ...

  10. 006-循环结构(下)-C语言笔记

    006-循环结构(下)-C语言笔记 学习目标 1.[掌握]do-while循环结构 2.[掌握]for循环结构 3.[掌握]嵌套循环 一.do-while循环结构 do-while语法:   1 2 ...