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:绝对定位,元素不占据父容器空间,相当 ...
随机推荐
- python ui自动化之多窗口切换
wd.current_window_handle #获取当前窗口句柄 wd.window_handles #获取所有窗口句柄 wd.switch_to.window(wd.window_handles ...
- 接口自动化测试之httprunner初探
❝ 今天来介绍一个python的一个开源项目:httprunner,接口自动化工具.第一次输入,难免有不周到的地方,轻喷~ ❞ 介绍: HttpRunner是一个简单优雅但功能强大的 HTTP(S) ...
- Golang语言系列-17-Gin框架
Gin框架 Gin框架简介 package main import ( "github.com/gin-gonic/gin" "io" "net/ht ...
- sqli-labs lesson 7-10 （文件导出，布尔盲注，延时注入）
写在前面: 首先需要更改一下数据库用户的权限用于我们之后的操作. 首先在mysql命令行中用show variables like '%secure%';查看 secure-file-priv 当前的 ...
- 在java程序中使用protobuf
目录 简介 为什么使用protobuf 定义.proto文件 编译协议文件 详解生成的文件 Builders 和 Messages 序列化和反序列化 协议扩展 总结 简介 Protocol Buffe ...
- noip19
sb\(O(n^{2})\)传参 T1 暴力一会儿就码好,结果.. 祭奠一下死去的代码 died #include<cstdio> #define MAX 1010 #define re ...
- Mysql---C#在cmd中使用mysqldump导出sql文件
一.概述 本文描述了在C#中利用mysqldump工具导出sql文件. 二.代码片段 CmdHelper类代码如下: public class CmdHelper { public static st ...
- SoutceTree用户名或者密码输入错误解决方案
soutceTree在拉取代码时候需要输入账户名或者密码,如果一时输入错了,可以这样修改: 1.找到这个目录:C:\Users\Administrator\AppData\Local\Atlassia ...
- 检测一个页面所用的时间的js
window.onload = function () { var loadTime = window.performance.timing.domContentLoadedEventEnd-wind ...
- 百闻不如一试——公式图片转Latex代码
写博客时,数学公式的编辑比较占用时间,在上一篇中详细介绍了如何在Markdown中编辑数学符号与公式. https://www.cnblogs.com/bytesfly/p/markdown-form ...