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

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.lryc.cn/news/255634.html

相关文章:

  • Redis hash表源码解析
  • dll动态链接库【C#】
  • Linux 系统设置cpu频率
  • git基本概念
  • 多个HTML属性
  • 基于运算放大器的电压采集电路
  • 数字图像处理(实践篇) 十六 基于分水岭算法的图像分割
  • 快速学习PyQt5的高级自定义控件
  • Python中读写(解析)JSON文件的深入探究
  • 我获取股票和期货数据的常用函数
  • 高并发场景下的httpClient使用优化技巧
  • 用php上传图片到阿里云oss
  • 服务器适合哪些使用场景_Maizyun
  • 发布“最强”AI大模型,股价大涨,吊打GPT4的谷歌股票值得投资吗?
  • 年度工作总结怎么写?掌握这些年终总结万能公式,让你的报告出彩无比!
  • 常用Nmap脚本
  • 在pom.xml中添加maven依赖,但是类里面import导入的时候报错
  • 【NEON】学习资料汇总
  • java中ReentrantLock的实现原理是什么?
  • C语言精选——选择题Day40
  • 大屏适配方案一scale()
  • WordPress免费插件大全清单【2023最新】
  • 支付宝小程序接口传参会默认排序
  • Numpy数组的运算(第7讲)
  • node后端接口无法插入数据为emoji的表情的问题
  • Conda常用命令总结
  • Oracle数据库如何实现自增-序列Sequence介绍(适合小白)
  • ke14--10章-2JDBC例子
  • 04数据平台Flume
  • Redis--13--缓存一致性问题