sticky,粘性定位
position:sticky,粘性定位;可以说是relative和fixed的结合;
滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置。
使用:
#id { position: sticky; top: 0; };
设置position:sticky,上下定位给一个(top,bottom,right,left)之一即可;左右定位需要两个值。
使用条件:
1、父元素不能overflow:hidden,overflow:auto,height:100%等属性。
2、上下定位给一个(top,bottom,right,left)之一即可;左右定位需要两个值,如(top:0;right:0;)。
3、父元素的高度不能低于sticky元素的高度。
4、sticky元素仅在其父元素内生效。
sticky,粘性定位的更多相关文章
- position:sticky 粘性定位的几种巧妙应用
背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...
- 粘性定位 sticky
position:sticky 粘性定位 top:200px 这是他的阈值,意思是当我们页面滚动到 200 像素的使用,我们的元素会自动变成固定定位,不到200像素的时候,我们的元素走的是相对定位 ...
- sticky -- position定位属性sticky值之粘性定位;
sticky简述 sticky 是css定为新增的属性:可以说是相对定位relative和固定定位fixed的结合: 它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的 ...
- 关于CSS的粘性定位sticky失效问题
CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...
- CSS粘性定位
粘性定位(position:sticky) 1.定义 粘性定位可以被认为是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位.(MDN传送门) 这个特定阈值指的是 top, ri ...
- jquery.sticky 粘性滚动插件使用
一个jQuery插件,使你能够做任何元素在您的网页上总是可见的,可以作为顶部固定导航显示插件. 官网地址:http://stickyjs.com/ github:https://github.com/ ...
- position:sticky粘性布局
新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- html+css定位篇
position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...
随机推荐
- java多线程---基础
一, java多线程----线程与进程 进程: 程序(任务)的执行过程,拥有资源(共享内存,共享资源)和线程(一个或者多个,至少一个). 例如:打开任务管理器,qq,chrome,都属于进程. 线程 ...
- java.lang.UnsupportedClassVersionError: com/dw/Function : Unsupported major.minor version 52.0
本地环境中有jdk7和jdk8,当把jdk8改为jdk7时,出现如下错误,是jdk版本的问题,在Properties-->JAVA Compiler-中的Compiler compliance ...
- Algorithm: Sieve of Eratosthenes
寻找比n小的所有质数的方法. 2是质数, 2*i都是质数,同样3是质数,3*i也都是质数 代码如下 int n; vector<, true); prime[] = prime[] = fals ...
- 复制一个带random指针的链表
一个单链表,其中除了next指针外,还有一个random指针,指向链表中的任意某个元素.如何复制这样一个链表呢? 通过next来复制一条链是很容易的,问题的难点在于如何恰当地设置新链表中的random ...
- struts2 codebehind + actionPackages 实现Action零配置
1.jar包:struts2-codebehind-plugin-2.2.1.1.jar 2.struts.xml:<!-- codebehind中查找action的返回结果资源时的默认文件夹 ...
- cifs挂载远程文件出现 No such device or address错误
1. 参考 https://www.raspberrypi.org/forums/viewtopic.php?t=82199 找了两天看到这个文章才解决了问题. 我是之前同事在windows上挂载成功 ...
- Zabbix数据库清理历史数据
Zabbix清理历史数据 Zabbix是个很好的监控软件,随着公司监控项目越来越多,数据越来越多,zabbix负载重,可能造成系统性能下降. Zabbix里面最大的表就是历史记录表,history,h ...
- ACM学习历程—HDU4720 Naive and Silly Muggles(计算几何)
Description Three wizards are doing a experiment. To avoid from bothering, a special magic is set ar ...
- 百度之星2017初赛A
雪崩,没晋级,补题 1001 分析:求n-1的约数个数 #include "iostream" #include "cstdio" #include " ...
- mac hosts
1 在命令行中输入:sudo vim /etc/hosts. 2 输入开机密码,就可打开文件.按下键盘i,对文件进入可编辑状态. 3 修改完,先按esc退出编辑模式,之后,按shift+:,再按wq来 ...