为什么CSS Grid的sticky定位会失效-css教程-PHP中文网

grid 中 position: sticky 失效主因是祖先元素设置了 overflow: hidden/auto/scroll 或 grid 轨道高度未明确约束；需检查 computed overflow、避免 auto 行高、确保滚动上下文存在且不被 contain 等属性干扰。

为什么css grid的sticky定位会失效

Grid 容器里 position: sticky 失效，几乎总是因为父容器或某层祖先设置了 overflow: hidden、auto 或 scroll，或者 Grid 轨道尺寸不可控——不是你写错了 top: 0，而是浏览器根本没把它当 sticky 处理。

Grid 容器本身设了 `overflow` 就会截断粘性链

只要 Grid 容器（或任意祖先）的 overflow 计算值是 hidden、auto 或 scroll，它就会成为 sticky 元素的“最近滚动祖先”。但 Grid 默认不滚动，结果就是 sticky 锚点被卡死，表现和 position: static 一样。

用 DevTools 的「Computed」面板逐级点开父元素，重点看 overflow-x 和 overflow-y 的最终值
Tailwind 的 overflow-hidden、Ant Design 的 .ant-card-body、自定义的 .grid-wrapper 都可能悄悄加了 overflow: hidden
临时加 overflow: visible !important 到疑似父级，如果 sticky 立刻恢复，就定位成功
必须保留裁剪效果时，用 clip-path: inset(0) 替代 overflow: hidden，它不创建新 BFC，sticky 不受影响

`grid-template-rows` 用 `auto` 或未显式定义高度，sticky 就找不到锚点

sticky 元素的 top 是相对于其包含块计算的。在 Grid 中，这个包含块默认是 Grid 容器，但如果轨道高度由 auto、min-content 或未约束的 1fr 决定，实际尺寸不可预测，sticky 就可能“提前触发”或压根不触发。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

避免 grid-template-rows: auto 1fr 这类写法；改用明确值，比如 60px 1fr 或 80vh 1fr
如果 sticky 元素放在第一行，确保该行高度 ≥ 元素自身高度（例如 height: 120px）
别把 sticky 元素放进跨多行的 grid-area —— 包含块边界模糊，Chrome 和 Firefox 渲染可能不一致

Flex/Grid 容器没设 `height` + `overflow-y: auto`，sticky 就没滚动上下文

Grid 容器本身不自动产生滚动上下文。Safari（尤其是 iOS）对“可滚动区域”的判定更严格：它需要明确的高度约束 + 可滚动空间 + 主轴方向。缺一不可。

给 Grid 容器加 max-height: 500px（不能只靠 min-height: 100vh）
配 overflow-y: auto（不是 overflow: auto），否则横向溢出也会被截断
确认内容确实撑高了容器（比如子项总高度 > max-height），否则浏览器认为“无需滚动”，sticky 直接退化
避免 display: inline-grid —— inline 级容器不创建 BFC，sticky 无效

Firefox 下 `contain: layout paint` 会让 sticky 在 Grid 中偏移几像素

Firefox 对 contain 属性与 Grid + sticky 的组合支持不完善。如果 Grid 容器或其祖先用了 contain: layout paint 或 contain: strict，sticky 元素会忽略轨道的 padding 或 border，导致视觉上“浮高”或“下沉”。