设置position: sticky；不生效的原因

已于 2022-12-02 17:57:41 修改
阅读量2.9k 收藏 6
点赞数 5
分类专栏： 小吴的前端分享 文章标签： css3 css 前端
于 2022-06-09 09:43:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42337801/article/details/125197355
版权
本文详细解析了CSS属性position:sticky在页面布局中的应用问题，重点介绍了使其生效的三个关键条件：必须指定top、right、bottom或left之一的阈值，父元素的overflow必须为visible，以及父容器高度需大于元素本身。此外，还特别提到在flex布局中使用position:sticky的注意事项，即元素高度需设置为fit-content。通过本文，开发者可以避免在实现粘性定位时遇到的常见陷阱。

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

昨天设置 position: sticky;属性没生效，我辛辛苦苦排查了一天，终于找到了原因

  1. 必须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同
  2. position: sticky 的元素的任意父节点的 overflow 属性必须是 visible
  3. 设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。
  4. 最重要的是如果你是flex布局，设置 position: sticky的元素高度一定到改为fit-content
【Web前端】position: sticky滑动一定长度后失效
Get your hands dirty
02-06 3322
检查使用position: sticky属性的元素的父元素，是否设置了height属性。删除父元素的height属性即可。
JS解决position:sticky的兼容性问题的方法
10-19
不过，position:sticky在一些老旧的浏览器中不被支持，尤其是在部分安卓浏览器上。因此，为了兼容这些环境，开发者们需要采用一些其他技术手段来模拟这种效果。文章中提到的解决方案是通过编写一个Vue组件，来封装...
position:sticky不生效
qq_38886284的博客
11-10 5491
通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。
关于 position: sticky 无法正常工作的问题总结
最新发布
qq_60743005的博客
03-18 301
为什么我的 position: sticky 无法正常工作
position: sticky 不生效
qq_44944325的博客
03-11 1252
position: sticky 需要父容器具有明确的高度或溢出属性（如 overflow: auto 或 overflow: hidden），否则无法生效。如果 sticky 元素在滚动时没有足够的空间（例如父容器高度不足），sticky 效果可能不明显或失效。如果父容器使用了 transform 或 filter 属性，position: sticky 会失效。如果父容器没有滚动，sticky 不会生效。如果父容器设置了 overflow: hidden，position: sticky 会失效。
position设置sticky不生效的几种情况
热门推荐
李小乐er
01-14 3万+
1.它的父元素或者父元素的父元素等（总之就是直系长辈元素）任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时，就会不生效。 2.未设置top,right,bottom,left中的任意一个值。相当于没设置脱离文档流后的固定位置，是以哪个位置为依据。所以也不会起到效果。 3.一个页面中，多处设置sticky。如果设置的固定住的位置相
position：sticky失效问题剖析
Rex的博客
03-10 1万+
sticky失效原因position:sticky生效的原理 position:sticky生效的原理 在 W3 官方文档中的定义是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport. 通俗来说就是，Sticky 定位类似于相对定位relative，（当它表现为 fixed 定位
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
微信小程序----position:sticky
12-20
在WXSS中，你可以这样设置`position:sticky`： ```wxss .sticky-element { position: -webkit-sticky; /* 兼容旧版本的WebKit浏览器 */ position: sticky; top: 0; /* 设定元素在滚动时应该固定的距离 */ } ``` ...
详解css粘性定位position：sticky问题采坑
12-14
使用`position: sticky`的正确语法是给元素设置`position: sticky`并配合`top`, `bottom`, `right`, 或 `left`中的一个属性。例如： ```css #sticky-nav { position: sticky; top: 100px; } ``` 使用`position: ...
用flex布局左右布局时，左边菜单栏position: sticky不生效
我的博客
03-02 2123
解决办法：加上 align-self: flex-start 原因：由于是flex布局，左边菜单栏的高度变得和右边的一样，且高于屏幕高度。 .nav-menu { align-self: flex-start; position: sticky; top: 64px; display: flex; flex-direction: column; } 记录于2022-3-2 ...
【CSS面试题】position：sticky不生效原因
qq_40992225的博客
08-03 1802
今天遇到布局时设置了 position: sticky；发现没有生效，于是找了一下问题的原因；
uni-table打包成app，在低版本安卓中使用 position: sticky；不生效的解决方法
c_jiji_yy的博客
09-13 588
直接在每一个中加position: sticky，然后就可以了。
position:sticky（粘性）未生效的几种情况
m0_61480514的博客
11-02 3090
一.设置sticky的元素的父元素，或者父元素的父元素等任意一个设置了overflow属性的就会不生效。 二.未设置top,right,bottom,left中的任意一个值。 三.一个页面中，多处设置sticky。z-index层级问题
position sticky与overflow冲突失效无作用，解决办法
hyduan_h5的博客
08-04 4776
position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
m0_71491195的博客
07-15 7045
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
如何解决CSSPositionSticky不起作用的问题？
qq_36262295的博客
04-11 4091
检查浏览器兼容性；检查是否指定了阈值；检查 Safari 的供应商前缀；检查祖先元素是否具有overflow属性集；检查height父属性是否未设置；检查父元素是否为 Flexbox。检查浏览器兼容性在检查其他问题之前，最好确保您使用的浏览器支持position: sticky.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值