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:绝对定位,元素不占据父容器空间,相当 ...
随机推荐
- mysql《一》
一.启动和停止服务器 通过管理员权限打开cmd命令指示符 通过 net stop mysql(自己的服务器名字) 停止服务器 通过 net start mysql(自己的服务器名字) 启动服务器 ...
- 跟我一起写 Makefile（二）
三.make是如何工作的 在默认的方式下,也就是我们只输入make命令.那么, 1.make会在当前目录下找名字叫"Makefile"或"makefile"的文 ...
- 《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
1.简介 按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位.其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位). 2.常用定位方法(8种) (1)id(2)na ...
- CNVD-2021-14536 锐捷 RG-UAC 统一上网行为管理审计系统信息泄露漏洞
漏洞简介 锐捷 RG-UAC 统一上网行为管理审计系统存在信息泄露,攻击者通过网页源代码可间接获取管理用户账号密码,登录管理后台. 漏洞复现 fofa搜索以下关键字 title="RG-UA ...
- Pikachu-RCE模块
一.概述 1.1 RCE漏洞 可以让攻击者直接向后台服务器远程注入操作系统命令或者代码,从而控制后台系统. 1.2 远程系统命令执行一般出现这种漏洞,是因为应用系统从设计上需要给用户提供指定的远程命令 ...
- noip9
T1 本次考试最水的一道题,然而我sb,前一个小时,找了一大堆跟题目无关的性质,干脆打了个20pts的表,然后就走了,最后几分钟才看出来,匆匆码出来,结果段错误,然后考试就结束了. 好吧,段错误是UB ...
- NOIP 模拟 7 回家
题解 题目 第一眼,板子题,不就是一个缩点吗?后来一想不对,哪有这么傻的出题人呢,出个这水题. 一想,不对,不仅要求割点,还要判断这个割点是否在搜索树 \(n\) 的祖先上.想到这后,我哈哈大笑,还想 ...
- 解决Mongoose 返回的文档过大导致模板引擎art-template无法渲染的问题，错误-RangeError: Maximum call stack size exceeded
参考:https://blog.csdn.net/qq_40659195/article/details/88411838 最近尝试用Node写一个小案例,使用到了MongoDB,使用过的人可以知道, ...
- Intellj IDEA 光标显示insert状态解决办法
使用idea过程中,不知道怎么回事,鼠标的光标老是insert状态,体验效果极其差劲,于是去百度,扒拉了好一阵,过滤了垃圾博客,发现了有两种方法可以解决此问题: 第一种方法: 在File------& ...
- 微信小程序自定义顶部
wxml <view style="height:{{titleHeight}}px;background:{{background}}" class="user- ...