fixed元素在iOS小屏易错位，因地址栏/键盘改变视口高度；应避免vh单位、禁用内部input、改用sticky或JS动态调整；sticky需父容器设relative+max-height+overflow；自定义元素须显式设display:grid和box-sizing:border-box；tooltip容器必加position:relative。
fixed 元素在小屏上被遮挡或错位
移动端 Safari 地址栏收放、键盘弹出时，position: fixed 元素常卡在错误位置，尤其底部悬浮条最明显。这不是 bug，而是 fixed 依赖视口（viewport）尺寸，而 iOS 的地址栏/键盘会动态改变可用视口高度。
关键对策是避免用 vh 单位控制 fixed 元素自身高度或父容器 padding；body 的 padding-bottom 必须用固定像素（如 56px），且该值需严格等于悬浮条的 height。同时禁止在 fixed 元素内部放 <input> 或 <textarea></textarea>——iOS 下键盘触发后，fixed 定位极易失效。
- 不要写
body { padding-bottom: 10vh; }，Safari 地址栏缩放时会跳变 - 不要给 fixed 元素设
top: 50vh做垂直居中，小屏下不可靠 - 若必须支持输入，改用
position: sticky+ 容器滚动，或 JS 监听resize动态重设bottom
sticky 元素在局部容器中不吸附
position: sticky 看似简单，但实际生效有强依赖：它只在“最近的带滚动的祖先容器”内起作用，且该祖先必须有明确的高度限制和 overflow: auto/scroll。很多人把 sticky 写在卡片内部按钮上，结果按钮随页面滚动消失——因为卡片本身没设滚动，浏览器就往上找，最终可能绑定到 html 根节点，失去局部意义。
正确做法是显式控制吸附范围：
立即学习“前端免费学习笔记（深入）”；
- 确保 sticky 元素的直接父容器设了
position: relative和max-height+overflow-y: auto - sticky 元素自身必须指定
top或bottom，不能只写sticky - 不要嵌套多层 sticky；Chrome 对嵌套
sticky支持不稳定，Safari 更差
自定义元素（如 <my-tooltip>）在响应式下网格塌缩
自定义标签默认是 display: inline 且 box-sizing: content-box，即使你用 JS 定义了它，CSS 仍按普通内联元素渲染。想让它撑满父容器并响应式分列，必须手动声明 display: grid 和 box-sizing: border-box，否则 gap 和 padding 会叠加导致宽度溢出，minmax() 计算基准也失效。
典型错误是把 grid-template-columns 写在子元素上，比如 my-tooltip > div，其实它该写在 my-tooltip 自身。
- 必须写：
my-tooltip { display: grid; box-sizing: border-box; } - 响应式断点统一写在外部 CSS，别在 JS 里动态改
style.gridTemplateColumns - 如果用了 Shadow DOM，
display: grid要写在:host里，否则无效
悬浮提示框（tooltip）在 flex/grid 容器中位置偏移
tooltip 常见结构是 <div class="tooltip-container"><span>Hover</span><div class="tooltip-content">...</div></div>。当这个容器被放进 display: flex 或 display: grid 的父级中，.tooltip-content 的 position: absolute 会以 flex/grid 容器为参考系定位——但该容器若没设 position: relative，absolute 元素就会继续向上找，最终可能相对于 body 定位，导致悬停时 tooltip 出现在屏幕边缘。
更隐蔽的问题是：flex 容器默认 align-items: stretch，会让 .tooltip-container 高度拉满，而 .tooltip-content 的 top: 100% 就会从拉伸后的底部算起，造成位置漂移。
- 所有含 tooltip 的容器，务必加
position: relative - 避免对 tooltip 容器设
align-items或justify-content，除非你明确控制其尺寸 - 用
transform: translateY(-100%)替代top: -100%可规避部分 flex 拉伸干扰
真正难处理的不是怎么写样式，而是判断「该用 fixed、sticky 还是 absolute」——这取决于滚动主体是谁、是否要脱离文档流、以及是否需要在键盘/地址栏变化时保持稳定。多数时候，fixed 适合全局操作条，sticky 适合局部滚动容器内的吸附项，absolute 只应在明确知道参考系且无滚动干扰时使用。
