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. HDU - 4990 Reading comprehension 【矩阵快速幂】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=4990 题意 初始的ans = 0 给出 n, m for i in 1 -> n 如果 i 为奇 ...

  2. spring-boot5

    Spring Boot集成MyBatis: (1)新建maven project;取名为:spring-boot-mybatis (2)在pom.xml文件中引入相关依赖: (3)创建启动类App.j ...

  3. Cortex-M3 Bit-Banding

    Cortex-M3 Bit-Banding 1. 概述 CM3的存储器系统支持所谓的"位带"(bit-band)操作. 通过它,实现了对单一bit的原子操作.位带操作仅适用于一些特 ...

  4. 在VS2015中的SDL2.0开发环境搭建

    写本文的目的在于使用网络上的教程及官方的教程(如:http://www.willusher.io/sdl2%20tutorials/2013/08/15/lesson-0-visual-studio) ...

  5. Spring Boot2.0之web开发

    1.关于静态资源的访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...

  6. macd背离的级别

    1分钟的背离可以忽略不看. 5分钟的背离可以预测未来5-6个小时的股价. 15分钟级别的背离可以预测未来24小时之内的股价. 30分钟级别的背离可以做中线. 周线背离可以影响1-2年的股价. 背离级别 ...

  7. 标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版

    由于版面限制,简单说下,详细的内容及在线预览.预览版压缩包,见这里http://levi.cg.am/archives/3507 为什么说是标准兼容: 因为大多数placeholder插件是这样兼容的 ...

  8. laravel基础课程---10、数据库基本操作(如何使用数据库)

    laravel基础课程---10.数据库基本操作(如何使用数据库) 一.总结 一句话总结: 1.链接数据库:.env环境配置里面 2.执行数据库操作:DB::table('users')->up ...

  9. Apache禁止或允许固定IP访问特定目录、文件、URL

    1. 禁止访问某些文件/目录 增加Files选项来控制,比如要不允许访问 .inc 扩展名的文件,保护php类库: <Files ~ "\.inc$"> Order a ...

  10. [转]BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...