css-position之fixed vs sticky
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的更多相关文章
- (转)实例详解CSS中position的fixed属性使用
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...
- CSS中position属性介绍（新增sticky）
position的含义是指定类型,取值类型可以有:static.relative.absolute.fixed.inherit 和 sticky,这里sticky是CSS3新发布的一个属性. 1.po ...
- css position sticky All In One
css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...
- css position static | absolute | fixed | relative
<div id="bigbox1"> <div id="box1" class="box">box1</ ...
- 解决IE6下Position：fixed问题(只用css)
在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
- fixed和sticky
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...
- CSS Position（定位）
CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...
- css position 5种不同的值的用法
position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky ...
随机推荐
- 八、【Docker笔记】使用Dockerfile创建镜像
在前面我们讲解了基于已有的镜像容器创建和基于本地模板导入两种方式来创建镜像,在这里我们就来说说第三种创建镜像的方式.Dockerfile是一个文本格式的配置文件,我们可以通过Dockerfile快速创 ...
- VMware中虚拟机克隆后多台主机网络冲突
在Vmware中将虚拟机的一台centos7机器克隆了3台,然后启动机器后出现机器都能够上网,但是无法在本地xshell中同时进行连接,且连接的某一台虚拟机都会经常中断 虚拟机克隆后,会遇到的问题: ...
- SpringCloud Alibaba01-Nacos
全家桶介绍: https://spring-cloud-alibaba-group.github.io/github-pages/greenwich/spring-cloud-alibaba.html ...
- 关于Git我们不得不知道的事（一）
一.什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). Git可以协助我们很方便的管理我们的项目,我们随时可以找回(或者回到)我们之前任何一个时刻的项目:还可以让同事或者开发小 ...
- 7L-双线链表实现
链表是基本的数据结构,尤其双向链表在应用中最为常见,LinkedList 就实现了双向链表.今天我们一起手写一个双向链表. 文中涉及的代码可访问 GitHub:https://github.com/U ...
- json格式的文件操作
1.字典转换为字符串(json.dumps) jsongeshi={"name":"yajuan","age":"10" ...
- 最全的中文NLP资源库，你确定不来看一下吗？
最全的中文NLP资源库,你确定不来看一下吗? 22/100 发布文章 qq_39248703 hello,小伙伴们大家好,今天给大家分享NLP资源库,可以说是最全的资源库了,很多包非常有趣,值得收藏, ...
- 31 Exception 异常处理
/* * Exception in thread "main" java.lang.ArithmeticException: / by zero at com.itheima_01 ...
- 史上最详细mac安装Qt教程
史上最详细mac安装Qt教程,小白看过来! 这是一篇非常适合Qt入门小白的的安装Qt教程,因为这学期我们小组的一个关于高速救援的项目要用到Qt与web进行交互式展现相关的图像,由于没有MSVC这个插件 ...
- Python操作rabbitmq系列（二）:多个接收端消费消息
今天,我们要逐步开始讨论rabbitmq稍微高级点的耍法了.了解这一步,对我们设计高并发的系统非常有用.当然,还可以使用kafka.不过还是算了,有几个硬性条件不支持,还是用rabbitmq吧. 循环 ...