原生 input type="date" 的日历面板由浏览器原生渲染，无法用 css 或 js 直接定位；其弹出位置取决于输入框可视区域、height/line-height、祖先 transform 等上下文因素；表格中需设 width: 120px、box-sizing: border-box、vertical-align: middle 并禁用 overflow: hidden 才能避免错位。
input type="date" 的弹出位置由浏览器控制，无法直接 CSS 定位
原生 input type="date" 弹出的日期选择器（日历面板）不是 DOM 元素，而是浏览器 UI 层的原生控件。它不响应 position、top、z-index 等 CSS 属性，也无法用 JavaScript 获取其尺寸或坐标。所谓“定位优化”，本质是**影响浏览器决定弹出位置的上下文条件**。
影响弹出位置的三个关键 DOM 与样式因素
浏览器通常将日历面板锚定在输入框的**可视区域边界内侧底部中心**，但具体位置会受以下因素扰动：
- 输入框是否在视口内：若
input滚动到视口外（或被overflow: hidden的父容器裁剪），部分浏览器（如 Safari）可能将面板弹到视口顶部，甚至完全不显示 - 输入框的
height和line-height：过小（如height: 20px）会导致右侧小图标被压缩，触发区域变小，面板可能错位或点击无效 - 父容器的
transform或perspective：Chrome 和 Edge 在有 CSS 变换的祖先元素下，可能将面板定位偏移，甚至脱离输入框
表格中 date 输入框弹出错位的典型修复
在 <table> 内使用 <code>input type="date" 时，常见“面板悬空”“只显示半截”“点不动”等问题，核心是盒模型挤压：
- 必须显式设置
width: 120px（ISO 格式需至少 10 字符宽度，加 padding/border 后建议 ≥120px） - 加
box-sizing: border-box，否则padding会让内容区更窄，图标被挤出可点击范围 -
td上设vertical-align: middle，避免因基线对齐导致输入框上下偏移 - 禁用
td { overflow: hidden }—— 这会直接裁掉弹出面板
隐藏 input 后仍要保证弹出正常，不能用 display: none
若你通过 CSS 隐藏 input type="date"（例如配合 showPicker() 实现自定义触发），切记：
- ❌ 不要用
display: none：元素脱离文档流后，showPicker()在部分浏览器（尤其是 Safari）会失败或定位异常 - ✅ 推荐组合：
visibility: hidden+position: absolute+left: -9999px：视觉隐藏、保留布局占位、不干扰其他元素，且确保showPicker()可正常唤起并锚定 - ⚠️ 注意：即使隐藏，该
input仍需在 DOM 中、有合法父节点（如td或div），不能被 JS 移除或注释掉
td 的 padding 值里，或者一个没写全的 box-sizing。别指望靠 JS 算位置去“修正”原生面板——它根本不给你这个机会。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
