原生 date 输入框的弹出面板常被裁剪或错位，主因是其不参与CSS层叠上下文计算；应避免父容器 overflow: hidden 或 fixed 定位，调用 showPicker() 前需 scrollIntoView 并 focus。
input type="date" 本身不会主动遮挡下方内容，但它的原生选择器弹出时，会覆盖页面现有布局 —— 尤其当输入框靠近底部、或父容器有 overflow: hidden、position: fixed 时，日期面板常被裁剪或错位。这不是输入框“遮挡”，而是浏览器对原生控件的渲染限制。
为什么 showPicker() 弹出后内容被盖住
调用 input.showPicker() 后，浏览器会在视口内定位并显示原生日期面板（类似 select 下拉），但它不参与 CSS 层叠上下文计算：
- 若输入框在 position: fixed 底部容器中，面板可能被父容器的 overflow: hidden 截断
- 若页面有 transform 或 will-change 的祖先元素，面板可能错位到左上角甚至不可见
- iOS Safari 对 fixed + input[type=date] 组合支持不稳定，面板常贴顶渲染，把下方按钮完全盖住
避免面板遮挡的三个实操要点
不用改 input 本身，重点控制它的渲染环境和触发时机：
- 确保输入框父容器没有
overflow: hidden，且至少有一层祖先满足overflow: visible（默认值即可） - 不要把
input[type=date]放在position: fixed或position: absolute的容器底部；改用position: relative+margin-bottom留白 - 调用
showPicker()前，临时滚动输入框到视口中央：input.scrollIntoView({ block: 'center', behavior: 'smooth' })，再延迟 100ms 执行showPicker()
iOS 上 visibility: hidden + showPicker() 的坑
为隐藏原生输入框而设 visibility: hidden; position: absolute; 是常见做法，但在 iOS Safari 中：
- 若输入框当前不可见（visibility: hidden 或 display: none），showPicker() 可能静默失败，或面板出现在屏幕外
- 更稳妥的方式是保留可见性但视觉隐藏：opacity: 0; width: 1px; height: 1px; padding: 0; border: none;，同时确保它仍在文档流中、可聚焦
- 必须在调用 showPicker() 前显式调用 input.focus()，否则 iOS 可能拒绝唤起面板
替代方案：降级为自定义日期选择器
当原生 input[type=date] 在关键路径中反复出问题（如遮挡确认按钮、无法滚动定位），直接放弃原生控件更可靠：
- 用 input type="text" + inputmode="numeric" + 自定义日历组件（如 flatpickr、vanilla-picker）
- 组件可完全控制弹出位置（用 position: absolute + top/left 动态计算）、层级（z-index 显式设高）和尺寸（不受父容器 overflow 影响）
- 需手动处理 autocomplete="bday" 和 aria-label 以保无障碍，但换来的是确定性渲染
最常被忽略的一点：iOS 上原生日期面板的位置不是由 input 的 getBoundingClientRect() 决定的，而是由当前焦点状态 + 视口滚动位置共同决定 —— 所以 scrollIntoView 和 focus 的顺序、时机，比样式更重要。
