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

已于 2022-12-02 17:57:41 修改
阅读量2.3k 收藏 5
点赞数 4
分类专栏： 小吴的前端分享 文章标签： css3 css 前端
于 2022-06-09 09:43:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42337801/article/details/125197355
版权

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

  1. 必须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同
  2. position: sticky 的元素的任意父节点的 overflow 属性必须是 visible
  3. 设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。
  4. 最重要的是如果你是flex布局，设置 position: sticky的元素高度一定到改为fit-content
可爱的橙子大爷
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生,接下来
JS解决position:sticky的兼容性问题的方法
11-30
在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。 position:sticky的兼容性以及作用 Caniuse上显示sticky的兼容性如下： Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点再屏幕中时表现为relative，当要超出的时候是fixed的形式展现，因为这个特性，我们就可以来实现一个sticky的模拟效果。 sticky组件实现 template部分 <div clas
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。如果设置的固定住的位置相
详解css粘性定位position：sticky问题采坑
12-14
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position: sticky; top: 100px; } 设置position:sticky同时给一个(top,bottom,right,left)之一即可 使用条件： 1、父元素不能overflow:hidd
position:sticky 实现粘性布局
11-16
css 样式 position: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不生效
最新发布
qq_38886284的博客
11-10 1869
通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
m0_71491195的博客
07-15 6360
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
导致position:sticky失效的原因
前端那些事@时光
09-22 8556
导致position:sticky失效的原因 一、简介 sticky 英文字面意思是粘，粘贴，所以称之为粘性定位。sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，即指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。 二、使用条件 sticky属性仅在以下
彻底理解粘性定位（position：sticky）
weixin_57585624的博客
09-05 9175
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如： .div{ position: sticky; top: 10px; } 在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下 一、应用场景： 1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上 2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体.
position:sticky（粘性）未生效的几种情况
m0_61480514的博客
11-02 2783
一.设置sticky的元素的父元素，或者父元素的父元素等任意一个设置了overflow属性的就会不生效。 二.未设置top,right,bottom,left中的任意一个值。 三.一个页面中，多处设置sticky。z-index层级问题
【Web前端】position: sticky滑动一定长度后失效
Get your hands dirty
02-06 1450
检查使用position: sticky属性的元素的父元素，是否设置了height属性。删除父元素的height属性即可。
如何解决CSSPositionSticky不起作用的问题？
qq_36262295的博客
04-11 3585
检查浏览器兼容性；检查是否指定了阈值；检查 Safari 的供应商前缀；检查祖先元素是否具有overflow属性集；检查height父属性是否未设置；检查父元素是否为 Flexbox。检查浏览器兼容性在检查其他问题之前，最好确保您使用的浏览器支持position: sticky.
用flex布局左右布局时，左边菜单栏position: sticky不生效
我的博客
03-02 1559
解决办法：加上 align-self: flex-start 原因：由于是flex布局，左边菜单栏的高度变得和右边的一样，且高于屏幕高度。 .nav-menu { align-self: flex-start; position: sticky; top: 64px; display: flex; flex-direction: column; } 记录于2022-3-2 ...
vue 简单吸顶效果实现vue中sticky不起作用替代方案
空空墓志铭的博客
08-22 2230
vue项目中需要实现吸顶效果，但sticky不起作用，v-sticky插件也没效果，费了半天劲愣是没能实现。查阅资料后发现，sticky不生效原因有：1）父元素设置了overflow:hidden或者overflow:auto2）未指定top、right、bottom、left4个值中的任意一个3）父元素高度小于sticky定位的元素高度sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
css3 sticky不生效的原因？
FE-阿阳的博客
03-03 1295
问题描述 布局时设置了 position: sticky ；发现没有生效，于是找了一下问题的原因； 解决方案 sticky不生效原因有： 父元素设置了overflow:hidden或者overflow:auto 未指定top、right、bottom、left4个值中的任意一个 父元素高度小于sticky定位的元素高度 所以： sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定
vue 项目中使用粘性布局不起作用_解决vue addRoutes不生效问题
weixin_35077079的博客
01-16 382
动态添加导航栏时，addRoutes不生效解觉1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏补充知识：vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决起因在当前项目中使用的iview-a...
css中的 position: sticky 失效的原因（1）
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
01-16 1680
最近在写东西的时候，我发现sticky失效的，找了老半天找到了原因。 (1)我们知道float是使得div悬浮，悬浮之后元素的父元素在不设置height的情况下其height为0px。如下的情况就会使得sticky失效。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值