CSS粘性定位(sticky)

最新推荐文章于 2025-05-15 15:15:46 发布
最新推荐文章于 2025-05-15 15:15:46 发布
阅读量1.2w 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： html html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Silencer_1/article/details/106540389
本文深入解析CSS中元素的定位机制，包括相对定位、固定定位的工作原理及触发条件，探讨了定位失效的情况，如缺少定位坐标、父元素overflow属性的影响及body高度设置。适合前端开发者深入了解布局细节。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原理

  • 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。(relative)
  • 元素定位在跨越特定阈值后为固定定位。(fixed)

失效的情况

  1. 没有top, right, bottom 或 left 之一(这不是废话吗…)
  2. 浏览器兼容(看控制台)
  3. 父元素的overflow属性值为：hidden / auto / scroll
  4. body的height:100%
CSS3新增的特性：粘性定位
LogicGuruX的博客
10-04 167
CSS3中引入了许多新的特性和功能，其中之一就是粘性定位。粘性定位是一种介于相对定位和固定定位之间的定位方式，它允许元素在滚动时保持在页面上的特定位置。本文将详细介绍粘性定位的用法，并提供相应的源代码示例。
前端CSS：CSS粘性布局 sticky：使用方法代码示例
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-29 1572
sticky定位是一种混合定位方式，结合了relative定位和fixed定位的优点。当元素位于视口内时，它会表现为relative定位，即相对于其正常位置定位；而当元素滚动出视口时，则会变为fixed定位，即相对于视口定位，停留在视口中的特定位置。
【转贴】CSS Sticky Footer: 完美的CSS绝对底部
weixin_34367257的博客
02-21 203
  原贴地址：http://parandroid.com/css-sticky-footer/   在帕兰映像中看到一篇好文，将它转贴到这儿。 CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做...
CSS定位技术：相对、绝对与粘性定位
最新发布
weixin_32456485的博客
05-15 287
本章介绍了CSS中的相对定位、绝对定位和粘性定位技术，通过实例展示了如何使用这些定位方法来控制网页元素的具体位置。相对定位允许元素相对于其正常位置进行偏移，绝对定位则将元素放置于指定位置，而不考虑其在文档流中的位置。粘性定位结合了前两者的特性，在元素到达视窗边缘时将其固定。此外，通过一个练习示例，展示了如何创建一个交互式的图片画廊。
CSS Sticky
JunChow
06-18 559
position:sticky; sticky原意为“粘贴的”，属于CSS3中position定位属性新增的一个属性值，称之为粘性定位，它是结合relative相对定位和fixed固定定位于一体的特殊定位方式，适用于某些特殊场景比如sticky footer。 例如：设置sticky的元素默认定位方式为relative，当它的位置超过指定阈值时定位方式会自动切换为fixed，直到父级元素离开屏幕...
CSS 粘性布局sticky：使用方法+代码示例
大剑师兰特的GIS世界
03-14 6783
CSS 中的 `position: sticky` 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 `position: sticky` 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。
css中的sticky属性
xiangyizhixuexi的博客
07-14 5702
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position : sticky ; top : 100px ; } 设置position:sticky同时给一个(top,botto
详解CSS粘性定位 sticky
12-11
CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...
详解css粘性定位position：sticky问题采坑
12-14
<div id="sticky-nav">这是一个tab切换栏，给sticky定位top=100px 发生滚动 ;">发生滚动 ``` 在实际项目中，可能会遇到兼容性问题。例如，在某些Android设备或小程序环境中，`position: sticky`可能存在点击穿透和...
css定位方式之粘性定位元素，使用场景课程表或者财务报表或者活动表格，固定表头和左侧label显示
05-20 594
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于toprightbottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hiddenscrollauto或overlay。
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
JS解决position:sticky的兼容性问题的方法
10-19
本篇文章主要介绍了JS解决position:sticky的兼容性问题的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
hc-sticky：JavaScript库，可在滚动时使页面上的任何元素可见
02-04
HC-粘 JavaScript库，可在滚动时显示页面上的任何元素。 无依赖关系，但lso可以用作jQuery插件。 查看。 快速开始 安装 该软件包可以通过以下方式安装： ： npm install --save hc-sticky 或下载。 包括HC-Sticky 脚本标签 < script src =" /path/to/hc-sticky.js " > </ script > Webpack /浏览器修饰 在脚本中，包括HC-Sticky的代码通常如下所示： const hcSticky = require ( &#39;hc-sticky&#39; ) ; 巴别塔 import hcStic
CSS粘性定位
m0_46744635的博客
08-21 888
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS粘性定位</title> <style> .bod...
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 640
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
2020-11-05 css实例：粘性定位及样式解释
Amanda&Rachel的博客
11-05 400
粘性定位 粘性定位是相对定位和固定定位的混合，给盒子设置一个偏移量，未到达该偏移量时是相对定位，到达偏移量时是固定定位。 css实例粘性定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ /*重置样式*/ margin: 0; padding
css3 position定位—— sticky 定位
weixin_48813932的博客
03-24 1636
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
容易忽视的CSS3粘性定位position sticky
weixin_45709829的博客
03-26 2587
CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性 理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位 二、基本原理 依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域 相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定 滚动元
css粘性定位position:sticky问题采坑
06-28
CSS粘性定位（position:sticky）是一种新的定位方式，它可以在不同滚动位置下保留元素位置，使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前，不支持CSS粘性定位的浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值