CSS——sticky定位

1. 大白话解释sticky定位

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

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

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

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

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

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

  1. 父元素:父盒子不在最近可滚动容器可视区时,sticky盒子始终表现为相对定位。
  2. 最近可滚动的容器:设置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失效问题剖析

参考视频:粘性定位

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/213792.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FacetWP Relevanssi Integration相关性集成插件

点击阅读FacetWP Relevanssi Integration相关性集成插件原文 FacetWP Relevanssi Integration相关性集成插件是FacetWP与用于高级搜索的 Relevanssi 插件的集成显着增强了您网站的搜索功能。这个强大的工具使您的用户能够轻松找到他们寻求的特定内容&#xff0c;无论他们的查询…

联邦多任务蒸馏助力多接入边缘计算下的个性化服务 | TPDS 2023

联邦多任务蒸馏助力多接入边缘计算下的个性化服务 | TPDS 2023 随着移动智能设备的普及和人工智能技术的发展,越来越多的分布式数据在终端被产生与收集&#xff0c;并以多接入边缘计算(MEC)的形式进行处理和分析。但是由于用户的行为模式与服务需求的多样,不同设备上的数据分布…

Android 幸运转盘实现逻辑

一、前言 幸运转盘在很多app中都有&#xff0c;也有很多现实的例子&#xff0c;不过这个难度并不是如何让转盘转起来&#xff0c;真正的难度是如何统一个方向转动&#xff0c;且转到指定的目标区域&#xff08;中奖概率从来不是随机的&#xff09;&#xff0c;当然还不能太假&…

C语言数组(下)

我希望各位可以在思考之后去看本期练习&#xff0c;并且在观看之后独立编写一遍&#xff0c;以加深理解&#xff0c;巩固知识点。 练习一&#xff1a;编写代码&#xff0c;演⽰多个字符从两端移动&#xff0c;向中间汇聚 我们依旧先上代码 //编写代码&#xff0c;演⽰多个字…

UE小:UE5性能分析

开始录制性能追踪 要开始录制性能追踪&#xff0c;您可以简单地点击界面上的“开始录制”按钮。 查看追踪数据 录制完成后&#xff0c;点击“Trace”菜单中的“UnrealInsights”选项来查看追踪数据。 使用命令行进行追踪 如果点击录制按钮没有反应&#xff0c;您可以通过命令…

Leetcode—901.股票价格跨度【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—901.股票价格跨度 算法思想 实现代码 class StockSpanner { public:stack<pair<int, int>> st;int curday -1;StockSpanner() {st.emplace(-1, INT_MAX);}int next(int price) {while(price > st.top(…

【LeetCode】28. 找出字符串中第一个匹配项的下标 【字符串单模匹配:KMP算法】

题目链接 Python3 直觉解法 class Solution:def strStr(self, haystack: str, needle: str) -> int:pn, ph 0, 0n len(needle) h len(haystack)while ph < h:if haystack[ph] needle[pn]:if pn n-1: # 1234 123return ph - len(needle) 1else: pn 1ph 1else:…

53. Protocol buffer 的Go使用

文章目录 一、介绍二、安装三、protoc3语法1、 protoc3 与 protoc2区别2、proto3生成go代码包Message内嵌Message字段单一标量字段单一message字段可重复字段slicemap字段枚举 一、介绍 Protobuf是Google旗下的一款平台无关&#xff0c;语言无关&#xff0c;可扩展的序列化结构…

苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App,自定义图标,启动动画,自定义名称,全屏应用pwa

在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上&#xff0c;让我们的web页面看起来像一个本地应用程序一样&#xff0c;通过桌面APP图标一打开&#xff0c;直接全屏展示&#xff0c;就像在APP中效果一样&#xff0c;完全体会不到你是在浏览器中。 1.网站添加样式 在…

一加 12 Pop-up快闪活动来袭,十城联动火爆开启

12 月 9 日&#xff0c;一加 12 Pop-up 快闪活动在北京、深圳、上海、广州等十城联动开启&#xff0c;各地加油欢聚快闪现场&#xff0c;抢先体验与购买一加 12。作为一加十年超越之作&#xff0c;一加 12 全球首发拥有医疗级护眼方案和行业第一 4500nit 峰值亮度的 2K 东方屏、…

solidity实现ERC20代币标准

文章目录 1、以太坊 - 维基百科2、IERC203、ERC204、Remix 编译部署 1、以太坊 - 维基百科 以太坊&#xff08;Ethereum&#xff09;是一个去中心化的开源的有智能合约功能的公共区块链平台。以太币&#xff08;ETH 或 Ξ&#xff09;是以太坊的原生加密货币。截至2021年12月&a…

js/jQuery常见操作 之各种语法例子(包括jQuery中常见的与索引相关的选择器)

js/jQuery常见操作 之各种语法例子&#xff08;包括jQuery中常见的与索引相关的选择器&#xff09; 1. 操作table常见的1.1 动态给table添加title&#xff08;指定td&#xff09;1.1.1 给td动态添加title&#xff08;含&#xff1a;获取tr的第几个td&#xff09;1.1.2 动态加工…

SSL 协议

SSL 是用于安全传输数据的一种通信协议。它采用公钥加密技术、对称密钥加密技术等保护两个应用之间的信息传输的机密性和完整性。但是&#xff0c;SSL 也有一个不足&#xff0c;就是它本身不能保证传输信息的不可否认性。 SSL 协议包括服务器认证、客户认证、SSL 链路上的数据完…

对String类的操作 (超细节+演示)

[本节目标] 1.认识String类 2.了解String类的基本用法 3.熟练掌握String类的常见操作 4.认识字符串常量池 5.认识StringBuffer和StringBuilder 1.String类的重要性 在C语言中已经涉及到字符串了&#xff0c;但是在C语言中要表示字符串只能使用字符数组或者字符指针&…

Nacos源码解读04——服务发现

Nacos服务发现的方式 1.客户端获取 1.1:先是故障转移机制判断是否去本地文件中读取信息&#xff0c;读到则返回 1.2:再去本地服务列表读取信息(本地缓存)&#xff0c;没读到则创建一个空的服务&#xff0c;然后立刻去nacos中读取更新 1.3:读到了就返回&#xff0c;同时开启定时…

系列学习前端之第 2 章:一文精通 HTML

全套学习 HTMLCSSJavaScript 代码和笔记请下载网盘的资料&#xff1a; 链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666 HTML 全称&#xff1a;HyperText Markup Language&#xff08;超文本标记语言&#xff09; 1、 HTML 标签 1. 标签又称元素&#…

【算法每日一练]-图论(保姆级教程篇12 tarjan篇)#POJ3352道路建设 #POJ2553图的底部 #POJ1236校园网络 #缩点

目录&#xff1a; 今天知识点 加边使得无向图图变成双连通图 找出度为0的强连通分量 加边使得有向图变成强连通图 将有向图转成DAG图进行dp POJ3352&#xff1a;道路建设 思路&#xff1a; POJ2553&#xff1a;图的底部 思路&#xff1a; POJ1236校园网络 思路&#x…

【华为数据之道学习笔记】1-2华为数字化转型与数据治理

传统企业通过制造先进的机器来提升生产效率&#xff0c;但是未来&#xff0c;如何结构性地提升服务和运营效率&#xff0c;如何用更低的成本获取更好的产品&#xff0c;成了时代性的问题。数字化转型归根结底就是要解决企业的两大问题&#xff1a;成本和效率&#xff0c;并围绕…

go写文件后出现大量NUL字符问题记录

目录 背景 看看修改前 修改后 原因 背景 写文件完成后发现&#xff1a; size明显也和正常的不相等。 看看修改前 buf : make([]byte, 64) buffer : bytes.NewBuffer(buf)// ...其它逻辑使得buffer有值// 打开即将要写入的文件&#xff0c;不存在则创建 f, err : os.Open…

solidity案例详解(五)能源电力竞拍合约

使用智能合约对电力公司和用户拍拍进行一个管理与上链&#xff0c;确保安全性&#xff0c;合约完整代码私信 a)现有系统架构和功能&#xff0c;服务提供方是谁&#xff0c;用户是谁&#xff1b; 系统架构&#xff1a; 电力拍卖系统&#xff0c;由能源公司部署。 服务提供方&a…