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:绝对定位,元素不占据父容器空间,相当 ...
随机推荐
- js 原始数据类型、引用数据类型
js的数据类型划分方式为 原始数据类型和 引用数据类型 栈: 原始数据类型(Undefined,Null,Boolean,Number.String) 堆: 引用数据类型(对象.数组.函数) 两种类型 ...
- C++ //多态案例三 ---电脑组装
1 //多态案例三 ---电脑组装 2 3 #include <iostream> 4 #include <string> 5 using namespace std; 6 7 ...
- .NetCore+OpenSSL实现Https
前言 最近,有时间研究了一下HTTPS安全通信的原理,感兴趣的同学可以看下上一篇博文深入理解Https如何保证通信安全 ,随即联想到近段时间开发的.NetCore项目,.NetCore API应用程序 ...
- WPF基础:Dispatcher介绍
Disaptcher作用 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主线程,其余的是子线程.在WPF或WinForm应用程序中,主线程负 ...
- MySQL-01-简介以及安装
Mysql简介 什么是数据 数据:文字.图片.视频... 人类认知的数据表现方式 计算机:二进制.16进制的机器语言 基于数据的重要性和复杂性的不同,我们可能有不同的管理方式 哪些数据是适合存储到数据 ...
- Thymeleaf页面静态化技术
Teymeleaf的使用 案例一:springboot搭建Thymeleaf 1.导入依赖 2.新建html页面模板 3.新建前端控制层Controller 4.新建启动类 1.导入依赖 <?x ...
- 安鸾CTF Writeup SSRF02
SSRF02 题目链接:http://www.whalwl.host:8090/ 看到题目,以为是SSRF 获取内网信息, SFTP FTP Dict gopher TFTP file ldap 协议 ...
- 零基础学Java之Java学习笔记（四）：运算符
算术运算符: 算术运算符是对数值类型的变量进行运算的,在 Java 程序中使用的非常多. 运算符 说明 例子 结果 + 加法-相加运算符两侧的值 9+9 18 - 减法-左操作数减去右操作数 10 ...
- CGO入门和OCR文字识别（非第三方API，有源码，效果好）实战
这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战 系列文章见: [第四天] GDB调试指南:C++中如何调试生产环境的程序? [第三天] IM敏感词算法原理和实现 [第二天] 现代IM架构研 ...
- Windows10 Dev - Background Execution
The Universal Windows Platform (UWP) introduces new mechanisms, which allow the applications to perf ...