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,粘性定位的更多相关文章

  1. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  2. 粘性定位 sticky

    position:sticky  粘性定位 top:200px 这是他的阈值,意思是当我们页面滚动到 200 像素的使用,我们的元素会自动变成固定定位,不到200像素的时候,我们的元素走的是相对定位 ...

  3. sticky -- position定位属性sticky值之粘性定位;

    sticky简述 sticky 是css定为新增的属性:可以说是相对定位relative和固定定位fixed的结合: 它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的 ...

  4. 关于CSS的粘性定位sticky失效问题

    CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...

  5. CSS粘性定位

    粘性定位(position:sticky) 1.定义 粘性定位可以被认为是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位.(MDN传送门) 这个特定阈值指的是 top, ri ...

  6. jquery.sticky 粘性滚动插件使用

    一个jQuery插件,使你能够做任何元素在您的网页上总是可见的,可以作为顶部固定导航显示插件. 官网地址:http://stickyjs.com/ github:https://github.com/ ...

  7. position:sticky粘性布局

    新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...

  8. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  9. html+css定位篇

    position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...

随机推荐

  1. Web框架和Django基础

    核心知识点 1.web应用类似于一个socket客户端,用来接收请求 2.HTTP:规定了客户端和服务器之间的通信格式. 3.一个HTTP包含两部分,header和body,body是可选,\r\n分 ...

  2. 计算机网络: IP地址,子网掩码,网段表示法,默认网关,DNS服务器详解

    楔子: 以Windows系统中IP地址设置界面为参考(如图1), IP地址, 子网掩码, 默认网关 和 DNS服务器, 这些都是什么意思呢? 学习IP地址的相关知识时还会遇到网络地址,广播地址,子网等 ...

  3. 使用CL命令编译cpp文件

    缘起,我的vs 2003无法新建工程,又不喜欢用vs 2013那样的重量级开发工具(就写两行代码,测试测试一些基本的语法规则或算法). 想来vs应该可以像GCC或G++那样直接用命令行编译Cpp文件, ...

  4. BZOJ 1201 [HNOI2005]数三角形:枚举 + 前缀和

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1201 题意: 有一个边长为n的正三角形网格,去掉其中一些线段,问你在这幅图中有多少个三角形 ...

  5. 分享知识-快乐自己:Struts2中 获取 Request和Session

    目录结构: POM: <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEnco ...

  6. overflow:hidden真的失效了吗?

    项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? 其实看似不合理的现象背后都会有其合理的解释. 我们知 ...

  7. HihoCoder1652 : 三角形面积和2([Offer收割]编程练习赛38)(几何)(不会几何,占位)

    描述 如下图所示,在X轴上方一共有N个三角形.这些三角形的底边与X轴重合,底边上两个顶点的坐标分别是(Li, 0)和(Ri, 0),底边的对顶点坐标是(Xi, Yi).其中Li ≤ Xi ≤ Ri 且 ...

  8. 【Lintcode】036.Reverse Linked List II

    题目: Reverse a linked list from position m to n. Given m, n satisfy the following condition: 1 ≤ m ≤ ...

  9. JSOI2008星球大战——联通块数量

    题目:https://www.luogu.org/problemnew/show/1197 此题不能按时间顺序进行删点.求连通块数量,而应打破时间的思维,先形成一张没有要删去的点的图,再从后往前逐个加 ...

  10. UnrealScript常用函数汇总

    转自:http://www.unrealchina.org/forum.php?mod=viewthread&tid=672&extra=page%3D1 foreach [用来遍历游 ...