sticky -- position定位属性sticky值之粘性定位；
sticky简述
使用条件：
基本使用示例 : (如果下面这个demo你能正常运行，说明当前浏览器是支持的)
兼容性一览：https://caniuse.com/#feat=css-sticky
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 *{margin: 0;padding: 0;}
10 </style>
11 </head>
12 <body>
13 <div style="height:300px;background:skyblue;">111111</div>
14 <div style="position:sticky;top:0px;height:30px;background:pink;">没错，我就是sticky</div>
15 <div style="height:300px;background:skyblue;">2222222</div>
16 <div style="height:300px;background:skyblue;">3333333</div>
17 <div style="height:300px;background:skyblue;">444444444</div>
18 <div style="height:300px;background:skyblue;">55555555555</div>
19 </body>
20 </html>
sticky -- position定位属性sticky值之粘性定位；的更多相关文章
- position:sticky 粘性定位的几种巧妙应用
背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...
- sticky，粘性定位
position:sticky,粘性定位:可以说是relative和fixed的结合: 滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置. 使用: #id ...
- position属性sticky和fixed的区别比较
position属性之fixed fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位. <!DOCTYPE h ...
- 粘性定位 sticky
position:sticky 粘性定位 top:200px 这是他的阈值,意思是当我们页面滚动到 200 像素的使用,我们的元素会自动变成固定定位,不到200像素的时候,我们的元素走的是相对定位 ...
- 关于CSS的粘性定位sticky失效问题
CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- position 的属性值
理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky | initial | inhe ...
- 【CSS】position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS position定位属性
css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...
随机推荐
- 37岁Android程序员被裁员，面试大厂被拒，降薪去小公司，心更凉了
在职场论坛看到这样一个帖子,程序员小A被前公司裁员了,裁员之后也并没有特别气馁,打算重头再来,结果却被现实打击到了. 他大学毕业的时候进入到一家知名互联网公司上班,工作期间,也是不断学习,提升自己的能 ...
- 神奇的 SQL 之别样的写法 → 行行比较
开心一刻 昨晚我和我爸聊天 我:"爸,你怎么把烟戒了,也不出去喝酒了,是因为我妈不让,还是自己醒悟,开始爱惜自己啦?" 爸:"儿子啊,你说的都不对,是彩礼又涨价了.&qu ...
- 《Python Cookbook v3.0.0》Chapter2 字符串、文本
感谢: https://github.com/yidao620c/python3-cookbook 如有侵权,请联系我整改. 本文章节会严格按照原书(以便和原书对照,章节标题可能会略有修改),内容会有 ...
- Java 常用类库与技巧【笔记】
Java 常用类库与技巧[笔记] Java异常体系 Java异常相关知识 Java在其创立的时候就设置了比较有效的处理机制,其异常处理机制主要回答了三个问题:what,where,why what表示 ...
- Dubbo系列讲解之服务注册【3万字长文分享】 23/100 发布文章
服务注册的几个步骤 对于RPC框架的服务注册,一般包含了如下的流程: 加载服务提供者,可能是通过xml配置的,也可能是通过扫描注解的 实例化服务提供者,并以服务接口作为key,实现类作为value ...
- Vue CLI安装报错 npm ERR! Exit handler never called!
安装Vue CLI时报错: npm install –g vue-cli 试了四种办法 1.把全局安装-g放到后面 npm install @vue/cli –g 2.命令行输入 npm 缓存清理命令 ...
- 使用docker-compose部署Sentry（附Sentry数据清理）
Ubuntu下Sentry部署 Sentry作为一款常见以及使用人数较多的监控服务,在接口监控.错误捕捉.错误报警等方面是非常不错的,在此之前我也用过Prometheus监控,各有各的好处,有兴趣的同 ...
- noip32
T1 暴力很好打,然而我是最后打的,所以只有40pts,其他人都有80pts的说 其实也应该想到的吧 80pts用的 \(set\) ,有个log,所以A不了. 正解: 把 \(set\) 换成 \( ...
- css内容渐入效果实现
.fade-in-section { opacity: 0; transform: translateY(20vh); visibility: hidden; transition: opacity ...
- javascript（js）反转字符串
网上看到的都是这个写法较多: str.split('').reverse().join(''); 这里发现一个ES6的写法也可以达到同样的效果: Array.from(str).reverse().j ...