当前位置：首页 > news >正文

CSS——sticky定位

news 2026/2/8 12:20:17

1. 大白话解释sticky定位

粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段

在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】，

但当最近可滚动容器触发滚动，父元素出现在最近可滚动容器的可视区并且滚动距离达到粘性定位sticky的要求时（比如top: 100px），sticky盒子的表现为固定定位fixed【第二阶段】，

接着滚动，当sticky盒子的父元素消失在最近可滚动容器的可视区时，sticky盒子会重新表现为相对定位relative【第三阶段】，

也就是说它不再固定，会随着父元素消失在最近可滚动容器的可视区。

结合上面的描述，我们可以总结粘性定位的位置受两个东西的影响：

父元素：父盒子不在最近可滚动容器可视区时，sticky盒子始终表现为相对定位。
最近可滚动的容器：设置sticky时使用的top、left等属性是相对的就是可滚动的容器，只要容器的overflow不是visible【容器不设置overflow就默认是visible】那么容器就是可滚动容器，如果盒子的祖先们没找到可滚动容器，那么body就作为可滚动容器，因为body是默认可滚动的。

2. 代码体会sticky定位

下面我们结合代码来理解：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin重叠问题</title><style>* {padding: 0;margin: 0;}.parent {width: 400px;height: 600px;background-color: tomato;overflow: visible;}.sticky {width: 200px;height: 200px;background-color: gold;/* 粘性定位 */position: sticky;top: 0px;}.box-top,.box-bot {width: 400px;background-color: pink;}.box-top {height: 200px;}.box-bot {height: 1000px;}</style>
</head><body><div class="box-top"></div><div class="parent"><div class="sticky">吸顶盒子</div></div><div class="box-bot"></div>
</body></html>

在这里插入图片描述

3. sticky生效的情况

sticky失效情况有：

未指定top、right、bottom或left其中的一个
父元素的高度小于sticky元素
没有找准sticky元素需要参考的最近可滚动元素
如果参考的可滚动元素是body，那么父元素的overflow必须是visible，不能是其他任意值

参考博客：position：sticky失效问题剖析

参考视频：粘性定位

CSS——sticky定位

1. 大白话解释sticky定位粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】， 但当最近可滚动容…...

编程日记 2023/12/9 1:16:57

Redis hash表源码解析

1、整体数据结构链式hash解决hash冲突、采用渐进式hash来完成扩容过程。 /** 哈希表节点*/ typedef struct dictEntry {// 键void *key;// 值union {void *val;uint64_t u64;int64_t s64;} v;// 指向下个哈希表节点，形成链表struct dictEntry *next;} dictEntry;…...

编程日记 2023/12/9 1:15:55

dll动态链接库【C#】

1说明： 在C#中，dll是添加【类库】生成的。 2添加C#的dll： （1）在VS中新建一个Windows应用程序项目，并命名为TransferDll。 （2）打开Windows窗体设计器，从工具箱中为窗体…...

编程日记 2023/12/9 1:13:53

source_code: https://github.com/emagii/cpufrequtils cpufreq-set - A small tool which allows to modify cpufreq settings.（修改内存频率的工具） cpufreq-set allows you to modify cpufreq settings without having to type e.g. “/sys/devices…...

编程日记 2023/12/9 1:12:52

git基本概念

一、版本控制概念 1.1 什么是版本控制 1.1.1 手动管理文件版本 1.1.2 版本控制软件概念：版本控制软件是一个用来记录文件发生的变化，以便将来查阅特定版本修订情况的系统，有时也叫“版本控制系统”。通俗的理解就是把手工管理文件版本的方…...

编程日记 2023/12/9 1:09:50

多个HTML属性

在HTML中，属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性，它们可以增强网站的视觉吸引力。接下来开始吧！🚀 Accept 属性您可以将accept属性与<input>元素（仅用于文件类型&#xff…...

编程日记 2023/12/9 1:05:47

基于运算放大器的电压采集电路

一、运算放大器运放推导的两个重要概念：虚短、虚断。 1、差分放大器以差分放大器为例进行推导分析。虚断–运放的"-“端、”“端的引脚电流接近为0； 根据基尔霍夫电流定律可知：iR1iRF，iR2iR3； iR1(Ui1-(V-…...

编程日记 2023/12/9 1:04:47

数字图像处理（实践篇）十六基于分水岭算法的图像分割

目录一分水岭算法二利用OpenCV实现分水岭算法的过程三实践一分水岭算法基于任何灰度图像都可以视为地形表面，其中高强度表示山峰和山丘，而低强度表示山谷。首先，开始用不同颜色的水（标签）填充每个孤立的山…...

编程日记 2023/12/9 1:02:45

快速学习PyQt5的高级自定义控件

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口快速掌握Pyqt5的2种弹簧快速掌握Pyqt5的5种布局快速弄懂Pyqt5的5种项目视图（Item View） 快速弄懂Pyqt5的4种项目部件（Item Widget） 快速掌握Pyqt5的6种按钮快速掌握Pyqt5的10种容器&…...

编程日记 2023/12/9 1:01:44

Python中读写（解析）JSON文件的深入探究

目录一、引言二、如何读取JSON文件三、如何写入JSON文件四、如何解析JSON字符串五、错误处理和异常处理六、使用第三方库提高效率七、总结一、引言在Python中，我们经常使用JSON（JavaScript Object Notation）格式来存储和传输…...

编程日记 2023/12/9 0:54:39

我获取股票和期货数据的常用函数

记录一下获取数据所使用的函数，以防止遗忘和方便查找。 # 获取掘金的数据 # 需要打开并登陆掘金终端 def get_data_juejin(symbol"bu2112",start"2021-8-1",end"2021-8-30 23:00:00",frequency"1800s",fields"eob,sy…...

编程日记 2023/12/9 0:51:36

高并发场景下的httpClient使用优化技巧

1. 背景我们有个业务，会调用其他部门提供的一个基于http的服务，日调用量在千万级别。使用了httpclient来完成业务。之前因为qps上不去，就看了一下业务代码，并做了一些优化，记录在这里。先对比前后：优化…...

编程日记 2023/12/9 0:47:32

用php上传图片到阿里云oss

如果你想自动创建目录并将文件上传到新的目录下，你可以使用阿里云 OSS 的 createObject 方法来实现。下面是更新后的示例代码： php <?php require_once __DIR__ . /vendor/autoload.php; // 引入 SDKuse OSS\OssClient; use OSS\Core\OssException;…...

编程日记 2023/12/9 0:45:29

服务器适合哪些使用场景_Maizyun

服务器适合哪些使用场景在当今的数字化时代，服务器作为互联网基础设施的核心组件，被广泛应用于各种场景。本文将探讨服务器适合哪些使用场景。一、Web服务器 Web服务器是服务器中最常见的一种，用于托管和运行网站。它负责处理来自客户端…...

编程日记 2023/12/9 0:43:28

发布“最强”AI大模型，股价大涨，吊打GPT4的谷歌股票值得投资吗？

来源：猛兽财经作者：猛兽财经谷歌在AI领域的最新进展，引发投资者关注在谷歌-C(GOOGL)谷歌-A（GOOG）昨日发布了最新的AI大模型Gemini后，其股价就出现了大幅上涨，更是引发了投资者的密切关注&a…...

编程日记 2023/12/9 0:41:26

年度工作总结怎么写？掌握这些年终总结万能公式，让你的报告出彩无比！

光阴似箭，日月如梭，时间总是不疾不徐地向前奔去，转眼就来到了2023年的最后一个月，12月一到，上班族和打工人又要开始忙活工作总结的事情~ 工作总结，不仅是一年工作的回顾，更是未来规划的起点。你…...

编程日记 2023/12/9 0:36:20

常用Nmap脚本

端口扫描类脚本 Nmap是一款非常流行的端口扫描工具，它可以帮助渗透测试工程师识别目标网络上开放的端口，并提供有关这些端口的详细信息。Nmap还提供了一系列基于脚本的功能，这些脚本可以扩展Nmap的功能，使其能够更深入地探测目标网…...

编程日记 2023/12/9 0:35:19

在pom.xml中添加maven依赖，但是类里面import导入的时候报错

问题： Error:(27, 8) java: 类TestKuDo是公共的, 应在名为 TestKuDo.java 的文件中声明 Error:(7, 23) java: 程序包org.apache.kudu不存在 Error:(8, 23) java: 程序包org.apache.kudu不存在 Error:(9, 23) java: 程序包org.apache.kudu不存在 Error:(10, 30) jav…...

编程日记 2023/12/9 0:34:18

【NEON】学习资料汇总

一、资料链接 Guide ： http://www.heenes.de/ro/material/arm/DEN0018A_neon_programmers_guide_en.pdf csdn博文1，基础案例： https://blog.csdn.net/kakasxin/article/details/103912832? csdn博文2，内部函数： ht…...

编程日记 2023/12/9 0:26:11

java中ReentrantLock的实现原理是什么？

ReentrantLock 的实现原理主要涉及到两个关键概念：同步器（Sync）和 AQS（AbstractQueuedSynchronizer，抽象队列同步器）。 ReentrantLock 使用 AQS 来实现可重入锁的机制。AQS 是 Java 并发包中的一个抽象基类…...

编程日记 2023/12/9 0:24:09

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

idea大量爆红问题解决

问题描述在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决就是如上所展示的问题，但是程序依然可以启动。问题解决…...

编程新知 2026/2/8 6:37:38

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/22 15:14:25

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...

编程新知 2026/2/6 9:49:55