为什么CSS滚动吸附在Safari中失效-css教程-PHP中文网

sticky元素在safari中需显式设置top/bottom等偏移值，且祖先不能有overflow:hidden/auto/scroll（即使不可滚动），旧版需-webkit-sticky前缀，flex/grid父容器须满足滚动判定条件，transform等会破坏sticky逻辑。

为什么css滚动吸附在safari中失效

sticky 元素没设 top/bottom 等偏移值

只写 position: sticky 不生效，Safari 要求必须显式声明吸附方向和距离。比如 top: 0、bottom: 16px，缺一个值，computed 中 position 就直接回退成 static。

常见误操作：

复制了别人代码但漏掉 top: 0
用 CSS 变量写 top: var(--sticky-top, 0)，但变量未定义，最终计算为 top: 0（看似有值，实则无效）
在媒体查询里写了 top: 0，但默认状态没写，导致非匹配断点时无偏移值

祖先元素 overflow 静默禁用 sticky

Safari 对 overflow: hidden、overflow: auto、overflow: scroll 极其敏感——只要 sticky 元素路径上任意一层祖先（哪怕隔了三层）设了这些值，且该容器实际不可滚动（如高度固定、内容未溢出），sticky 就会被强制降级为 static。

排查方法：

在 DevTools 中选中 sticky 元素，逐级向上点父节点，在「Computed」里查 overflow-x 和 overflow-y
临时删掉可疑节点的 overflow 声明，看是否恢复
重点盯：Modal 外层 wrapper、Card 容器、Tab 根节点、微信小程序的 scroll-view

不能删 overflow 时，可用 clip-path: inset(0) 替代——视觉裁剪一致，但不创建新滚动上下文。

iOS Safari 15.4 及更早版本不识别 sticky

这些旧版只认 position: -webkit-sticky，且必须写在标准声明之前。顺序写错（比如 position: sticky; position: -webkit-sticky;）会导致整条规则被忽略。

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

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

下载

正确写法：

element {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

注意：

别写成 -webkit-position: sticky（属性名不存在）
PostCSS autoprefixer 若目标未包含 ios_saf ，不会自动补 <code>-webkit-sticky
@supports (position: sticky) 在旧版 Safari 里不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')