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. Bootstrap——全局CSS样式

    1.栅格系统 containter:用于固定宽度并支持响应式布局的容器 container-fluid:用于100%宽度,占据全部视口(viewport)的容器 row:行,必须在container或 ...

  2. poj2965 The Pilots Brothers' refrigerator —— 技巧性

    题目链接:http://poj.org/problem?id=2965 题解:自己想到的方法是枚举搜索,结果用bfs和dfs写都超时了.网上拿别人的代码试一下只是刚好不超时的,如果自己的代码在某些方面 ...

  3. Dubbo动态负载均衡(socket环境实现)

    消费者 去注册中心获取信息 然后缓存到本地 如果有生产者某个服务宕机了  会通过通知的方式告知 (订阅的方式) 微服务rpc远程调用框架中,服务的负载均衡都是采用本地负载均衡的,Spring Clou ...

  4. Contiki 2.7 Makefile 文件(六)

    5.第五部分 ifndef CONTIKI $(error CONTIKI not defined! You must specify where CONTIKI resides!) endif if ...

  5. PYTHON 爬虫笔记五:BeautifulSoup库基础用法

    知识点一:BeautifulSoup库详解及其基本使用方法 什么是BeautifulSoup 灵活又方便的网页解析库,处理高效,支持多种解析器.利用它不用编写正则表达式即可方便实现网页信息的提取库. ...

  6. 深入理解JVM - 垃圾收集器与内存分配策略 - 第三章

    引用计数算法——判断对象是否存活的算法 很多教科书判断对象是否存活的算法是这样的:给对象添加一个引用计数器,每当一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器为0的对象 ...

  7. 使用js获取当前页面的url网址信息。

    1.设置或获取整个 URL 为字符串: window.location.href 2.设置或获取与 URL 关联的端口号码: window.location.port 3.设置或获取 URL 的协议部 ...

  8. mybatis进行分页,使用limit

    这里记录两个思路: 首先是写一个不能执行的代码. <select id="query" parameterType="map" resultType=&q ...

  9. linux命令学习笔记(51):lsof命令

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在, 通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协 ...

  10. linux shell date 时间运算以及时间差计算方法

    最近一段时间,在处理Shell 脚本时候,遇到时间的处理问题. 时间的加减,以及时间差的计算. 获取当前时间戳 date +%s . 时间加减 这里处理方法,是将基础的时间转变为时间戳,然后,需要增加 ...