css sticky定位失效原因

html 复制代码
<div style={{background:"red",height:"200vh"}}>
            <div style={{ width: "100px", height: "100px", background: "#000" }}></div>
            <div style={{width:"100px",height:"100px",background:"green",position:"sticky",top:"0px"}}></div>
        </div>
css 复制代码
position: sticky;
  top: 20px;

sticky 定位失效原因:

1.必须 top/left/right/bottom 值设置一个

2.body。html 等高度不能为100vh屏幕高度

3.sticky定位的层的父级或者上级div的overflow不能为hidden;

相关推荐
颜进强1 分钟前
25 · NestJs DurableProviders 持久化 Provider:把 ContextId 当缓存键
前端·后端·ai编程
爱丶不疚1 分钟前
Electron: Sentry 都采集了什么?你知道吗
前端·electron
恋猫de小郭6 分钟前
Dart 4.0 要彻底移除 dart:mirrors,Augmentations 应该要来了
android·前端·flutter
流水白开7 分钟前
React的Virtual DOM、Diff算法和Fiber
前端·react.js
乘风gg9 分钟前
Spec Kit vs OpenSpec vs Superpowers:我为什么最后自己搭了一套
前端·ai编程·claude
颜进强11 分钟前
24 · NestJs LazyLoadingModules 懒加载模块:你在前端天天 `import()` 懒路由,但 Nest 偏偏不能懒加载路由
前端·后端·ai编程
传人15 分钟前
页面中心圆圈放大效果如何写
前端·css
liangshanbo121516 分钟前
前端面试题:微信小程序怎么优化性能?
前端·微信小程序·notepad++