使用 position: absolute 易致表单控件脱离文档流而错位或消失；应为父容器设 position: relative，慎用百分比定位，优先用 transform 微调、flex 实现对齐，并正确建立堆叠上下文以保障 z-index 有效。
position: absolute 会脱离文档流，表单控件容易“消失”或错位
表单里用 position: absolute 调整 input、label 或 button 位置时，最常见问题是控件突然不占空间、被遮挡，或随窗口缩放严重偏移。这是因为绝对定位让元素脱离正常流，父容器若没设 position: relative，它就会相对于最近的已定位祖先（甚至 body）定位，而非你预期的表单区域。
- 确保包裹表单控件的直接父容器（比如
div.form-group）设置了position: relative - 避免对
label和input同时绝对定位——它们原本的语义关联和可访问性（如点击 label 聚焦 input）可能被破坏 - 慎用
top/left百分比值：在响应式布局中，top: 10%是相对于父容器高度计算的，而表单父容器高度常为 auto，结果不可控
用 transform 替代 top/left 微调位置更安全
当只需要轻微偏移（比如下拉箭头对齐、图标居中），transform: translate() 比 top/left 更可靠：它不触发重排（reflow），不影响文档流，且像素级控制更稳定。
input.icon-right {
padding-right: 32px;
}
input.icon-right::after {
content: "▼";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%); /* 比 top: calc(50% - 8px) 更简洁鲁棒 */
}-
transform不影响其他元素布局，适合叠加装饰性元素（如清空按钮、验证图标） - 不要对
input本身设transform后再设width: 100%——某些浏览器（尤其是旧版 Safari）可能渲染出宽度异常 - 若需兼容 IE9+，可用
transform: translateY(-50%)，但避免混合使用translateZ(0)强制硬件加速，它可能引发 iOS 表单输入框闪烁
flex 布局 + align-items 是表单行内对齐的首选方案
想让 label、input、button 在同一行垂直居中？硬写 margin-top 或 line-height 容易在字体大小、行高变化时失效。Flex 是更现代、更可控的方式。
.form-row {
display: flex;
align-items: center; /* 垂直居中所有子元素 */
gap: 8px; /* 替代 margin，更清晰 */
}
.form-row label {
flex: 0 0 80px; /* 固定标签宽度，不伸缩 */
}
.form-row input,
.form-row select {
flex: 1; /* 输入框自动填满剩余空间 */
}- 避免给
input设固定height再配line-height——不同浏览器对表单控件的默认基线处理不一致，align-items: center能统一解决 - 注意
gap在部分老版本 Edge 中不支持，可降级为margin，但需统一管理左右 margin 防止嵌套错乱 - 若表单需支持 RTL（如阿拉伯语），用
justify-content: flex-start比text-align: left更可靠
z-index 在表单弹层中必须配合定位层级使用
下拉选择（select 自定义组件）、日期弹窗、提示气泡等，常因 z-index 失效被遮挡。根本原因不是数值不够大，而是堆叠上下文（stacking context）未正确建立。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有定位（
position: relative或以上）才能让z-index生效；仅设z-index无定位等于无效 - 避免全局设
z-index: 9999——应按功能分层，例如：tooltip: 10、dropdown: 100、modal-overlay: 1000 - 表单内嵌 iframe（如地图、支付 SDK）会创建独立堆叠上下文，其内部内容无法被外部
z-index盖住；此时需调整 iframe 的z-index或用iframe[seamless]（已废弃）等替代方案
实际项目中最容易忽略的是：表单控件的 focus 状态样式在绝对定位后可能偏移，或者 outline 被裁剪。检查时务必在真实焦点状态下测试，而不是只看 hover 效果。
