【CSS面试题】position：sticky不生效原因

最新推荐文章于 2024-05-24 15:24:04 发布
最新推荐文章于 2024-05-24 15:24:04 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： css面试题 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40992225/article/details/126147211
版权

今天遇到布局时设置了 position: sticky ；发现没有生效，于是找了一下问题的原因；
sticky不生效原因有：

  • 父元素或者父元素的父元素等设置了overflow:hidden或者overflow:auto
  • 未指定top、right、bottom、left4个值中的任意一个
  • 一个页面中，多处设置sticky
  • 父元素不设置sticky 子元素设置sticky 子元素sticky效果不生效
  • 父元素高度小于sticky定位的元素高度
  • 小程序开发的时候，scroll-view包裹sticky sticky失效
纵有千堆雪与长街
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
JS解决position:sticky的兼容性问题的方法
10-19
本篇文章主要介绍了JS解决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。如果设置的固定住的位置相
如何解决CSSPositionSticky不起作用的问题？
qq_36262295的博客
04-11 3650
检查浏览器兼容性；检查是否指定了阈值；检查 Safari 的供应商前缀；检查祖先元素是否具有overflow属性集；检查height父属性是否未设置；检查父元素是否为 Flexbox。检查浏览器兼容性在检查其他问题之前，最好确保您使用的浏览器支持position: sticky.
设置 sticky 不生效？会不会是你还是没懂 sticky？
最新发布
左不言的博客
05-24 303
就是不论你被谁包着，你只会往上找有 overflow 属性的盒子进行定位，包括：overflow:hidden;他外边的盒子是 100px 的高， 给他 position: sticky；比如这个橘色的小盒子，他的外边有一个盒子（红色），如果橘色的盒子会定位到滚动条盒子的地方，但是他的 bottom 不会低于包裹他的这个红色盒子。它的定位不超过滚动条元素的 top 位置，前提：不低于包裹自己的盒子！基本上可以看懂的就会知道。sticky 是相对于存在滚动条的内容的，啥意思？
css中的 position: sticky 失效的原因（1）
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
01-16 1720
最近在写东西的时候，我发现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=
css 什么情况下position:sticky会失效
weixin_35750953的博客
01-23 297
position:sticky的元素需要有一个已定位的父元素(如:relative, absolute, fixed)。如果父元素没有定位，或者浏览器不支持sticky定位，那么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 定位
详解css粘性定位position：sticky问题采坑
12-14
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
CSS使用position:sticky 实现粘性布局的方法
09-24
需要注意的是，`position:sticky` 是一个相对较新的CSS特性，虽然大多数现代浏览器已经支持，但一些较旧或非主流的浏览器可能不支持。因此，在使用 `position:sticky` 时，最好通过条件注释、特性检测或其他回退策略...
position:sticky（粘性）未生效的几种情况
m0_61480514的博客
11-02 2830
一.设置sticky的元素的父元素，或者父元素的父元素等任意一个设置了overflow属性的就会不生效。 二.未设置top,right,bottom,left中的任意一个值。 三.一个页面中，多处设置sticky。z-index层级问题
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
m0_71491195的博客
07-15 6517
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
css3 sticky不生效的原因？
FE-阿阳的博客
03-03 1315
问题描述 布局时设置了 position: sticky ；发现没有生效，于是找了一下问题的原因； 解决方案 sticky不生效原因有： 父元素设置了overflow:hidden或者overflow:auto 未指定top、right、bottom、left4个值中的任意一个 父元素高度小于sticky定位的元素高度 所以： sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定
css3 sticky不生效怎么办
benli8541的博客
03-08 253
css3 sticky不生效的解决办法：1、父元素不能overflow:hidden或者overflow:auto属性；2、必须指定top、bottom、left、right4个值之一；3、父元素的高度不能低于sticky元素的高度。 本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。 推荐：《css视频教程》 sticky不生效原因有： 父元素设置了overflow:hidden或者overflow:auto 未指定top、right、bottom、left4个值中的任意一个 父
关于CSS的粘性定位sticky失效问题
有梦想的水手啊的博客
05-08 4255
sticky 的作用范围只在父元素之内，父元素的兄弟元素会忽略这个属性，把吸顶的元素顶上去
微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效
rb0518的博客
08-27 4616
记录一次在做 微信小程序开发时，在没有使用scroll-view的时候，我们使用vant-sticky做吸顶效果的时候可以正常使用。在做回到顶部时，需要拿到实时的滚动距离，这时候就得使用上scroll-view了。我们可以看到Vant Weapp也是非常的细心，帮我们做了解答。但是当我们使用scroll-view时，突然发现吸顶失效了。属性可以实现在 scroll-view 内嵌套使用。我们先清楚为什么要使用scroll-view？好了，是不是非常简单，有任何问题欢迎下方评论。...
安卓和ios针对小程序兼容以及小程序技术实现上本身遇到的一些问题
李小乐er
01-04 3520
ios: 1.ios对全屏设置定位，切换闪动问题、可以上下超出滑动问题
彻底理解粘性定位（position：sticky）
weixin_57585624的博客
09-05 9882
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如： .div{ position: sticky; top: 10px; } 在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下 一、应用场景： 1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上 2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体.
关于position:sticky失效的原因分析
weixin_45394002的博客
07-31 4305
sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 sticky属性仅在以下几个条件都满足时有效： 父元素不能overflow:hidden或者overflow:auto属性 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 父元素的高度不能低于sticky元素的高度 很明显，这里父元素和子元素高度相同，所以不会用到relative定位，直接用f
position:sticky不生效
09-15
position:sticky属性在某些情况下可能不会生效。以下是一些常见原因和解决方法： 1. 父级元素没有设置高度：position:sticky需要一个确定的高度才能正常工作。如果父级元素没有设置高度，则sticky定位将无法生效。请确保父级元素具有适当的高度，或者使用min-height属性来设置最小高度。 2. 没有设置top、bottom、left或right值：position:sticky需要设置一个top、bottom、left或right值来确定元素的粘性位置。如果没有设置这些值，元素将无法正确地定位。请确保设置了正确的定位值。 3. 元素不在滚动容器内：position:sticky只能在滚动容器内生效。如果元素不在任何滚动容器内，sticky定位将无法工作。请确保元素位于一个具有滚动功能的父级容器内。 4. 滚动容器的overflow属性不是scroll或auto：滚动容器必须具有scroll或auto的overflow属性才能使position:sticky生效。如果滚动容器的overflow属性设置为hidden或visible，sticky定位将无法正常工作。请确保滚动容器的overflow属性设置正确。 5. 浏览器兼容性问题：某些旧版本的浏览器可能不支持position:sticky属性。请确保您的浏览器支持该属性，或者考虑使用其他方法实现类似的效果（如使用JavaScript）。 如果您仍然无法解决问题，请提供更多的代码和上下文，以便我可以更具体地帮助您。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纵有千堆雪与长街

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值