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 ...
随机推荐
- python爬虫之requests的基础使用
1.先安装requests库,打开cmd,输入:pip install requests
- 数据挖掘入门系列教程（八点五）之SVM介绍以及从零开始推导公式
目录 SVM介绍 线性分类 间隔 最大间隔分类器 拉格朗日乘子法(Lagrange multipliers) 拉格朗日乘子法推导 KKT条件(Karush-Kuhn-Tucker Conditions ...
- 程序员的娱乐项目：Arduino 之 HelloWorld
文章更新于:2020-03-14 文章目录 一.什么是Arduino 二.怎么购买Arduino 三.Arduino都是有那些版本 四.哪里可以找到Arduino的资料 五.Arduino 的供电电源 ...
- 34.1 字符流-- FileRead FileWrite
一次读取一个字符 FileReader fr = new FileReader("aa.txt"); // System.out.println(fr.read()); // Sy ...
- ps 命令显示不完整的问题
今天在使用ps命令的时候,无法查找到指定名字的进程ID,仔细查找才发现ps命令查找的结果中进程启动的命令以及参数信息被截断了 问题实例 用户wanng启动了一个进程 wanng_qytrunkcros ...
- mappedBy和JoinColumn，onetomany。
无论是onetomany,还是manytoone.都要设置级联关系(cascade),否则不会储存关联的数据. @Entity public class Clazzss { @Id @Generate ...
- python3（十三）map reduce
# map()函数接收两个参数,一个是函数,一个是Iterable, # map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterator返回. def f(x): return x * ...
- 【论文笔记】张航和李沐等提出：ResNeSt: Split-Attention Networks（ResNet改进版本）
github地址:https://github.com/zhanghang1989/ResNeSt 论文地址:https://hangzhang.org/files/resnest.pdf 核心就是: ...
- mysql优化之分区
mysql分区类型 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询的情况,性能会 ...
- 作为python开发者，这几个PyCharm 技巧你必须掌握！
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取htt ...