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相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...
随机推荐
- windows下安装Qt
1.Linux下安装Qt与MySQL相对来说比较容易,在这里我就不多加介绍. 接下来主要介绍windows下安装Qt与MySQL. 2.在windows,我安装QtCreator, 使用的是qt-wi ...
- 剑指Offer:把数组排成最小的数【45】
剑指Offer:把数组排成最小的数[45] 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如,输入数组是{3.32.321},则打印出来的这3 ...
- (C)结构数组
结构数组 对于大小相同但是类型不同的数组,定义结构体数组对其很有帮组.例如: char *keyword[NKEYS]; int keycount[NKEYS]; 这两个数组大小相同,因此 可以用另一 ...
- Android Weekly Notes Issue #290
Android Weekly Issue #290 December 31st, 2017 Android Weekly Issue #290 本期内容包括介绍Kotlin逆变协变的一篇(虽然没说清楚 ...
- Tomcat部署java项目java.lang.OutOfMemoryError异常解决方法
java.lang.OutOfMemoryError异常解决方法 Window系统环境下,在catalina.bat文件第一行添加以下内容 set JAVA_OPTS=-Xms512m -Xmx512 ...
- 分布式任务调度平台XXL-Job搭建
下载: https://github.com/xuxueli/xxl-job 下载 然后倒入到自己的工程里面 引入后: 导入数据:跑一边 导入: 修改: Window -->show view- ...
- c语言学习的第11天 指针
#include<stdio.h> int main(void) { int * p; int i=3; int j; p=&i; j=*p; printf("i=%d, ...
- 分享知识-快乐自己:微服务的注册与发现(基于Eureka)
1):微服务架构 服务提供者.服务消费者.服务发现组件这三者之间的关系: 各个微服务在启动时,将自己的网络地址等信息注册到服务发现组件中,服务发现组件会存储这些信息. 服务消费者可从服务发现组件查询服 ...
- memcached高可用
http://sourceforge.net/projects/repcached/ memcached-1.2.8-repcached-2.2.tar.gz tar zxvf memcached-1 ...
- http://www.cnblogs.com/henw/archive/2012/01/06/2314870.html
C#多线程学习 之 线程池[ThreadPool] 在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 ...