全屏遮罩层必须用 position: fixed; inset: 0，避免漏白和跳变；搜索框居中用 display: flex；pointer-events: none 需配合子元素 pointer-events: auto；背景透明度用 rgba() 配合 background-color 过渡。
全屏遮罩层必须用 position: fixed; inset: 0
用 position: absolute 或 position: relative 都会漏白——前者依赖父容器高度，后者根本没脱离文档流；100vh/100vw 在 iOS Safari 地址栏收放时跳变。真正稳的写法是 position: fixed; inset: 0（等价于 top: 0; right: 0; bottom: 0; left: 0;），它不依赖视口单位，也不受祖先 transform 或 filter 干扰。
常见错误：把遮罩塞进某个 div.modal 里，结果被外层 transform: translateZ(0) 截断；正确做法是直接用 document.body.append(overlayEl) 动态插入，确保挂载在 下。
搜索框居中必须用 display: flex，别碰 top/transform
top: 50%; transform: translateY(-50%) 在缩放、横屏、iOS 地址栏弹出时会偏移——它依赖元素自身高度计算，而字体渲染、行高、DPI 缩放都会让实际高度浮动。遮罩层只负责覆盖，居中逻辑应交给内部子元素。
实操建议：
- 遮罩层设
display: flex; align-items: center; justify-content: center; - 搜索框本身用固定宽高或
max-width: 90vw，避免拉伸变形 - 别给搜索框设
width: 100%，否则在 flex 容器里可能撑满全屏 - 若需适配键盘弹出，加
body { overscroll-behavior: contain; }阻止底层滚动
pointer-events: none 必须作用于遮罩自身，子元素要显式恢复
加了 pointer-events: none 却还能点到底下按钮？问题不在遮罩，而在它的子元素——<input>、<button></button> 默认继承 pointer-events: auto，会挡住穿透路径。遮罩设 none 只是“不主动拦截”，不代表“自动透传”。
正确写法：
- 遮罩层：
pointer-events: none; - 搜索框及内部可交互元素：
pointer-events: auto; - 别在遮罩上监听
click或focus，事件应委托到具体输入控件
背景透明度要用 rgba()，过渡动画优先改 background-color
用 opacity 会让整个遮罩及其子元素一起变透明，导致搜索框文字也模糊；且 opacity 过渡会触发重绘，性能不如 background-color 平滑。
推荐写法：
- 遮罩背景用
background-color: rgba(0, 0, 0, 0.7); - 过渡用
transition: background-color 0.3s ease; - 展开时改
background-color值，收起时还原，不碰opacity - 如果需要淡入效果，可在初始状态设
background-color: rgba(0, 0, 0, 0);，再过渡到带透明度的值
inset 的支持）全在细节里卡住。尤其是 iOS 上的地址栏行为和 Android 软键盘触发时机，得靠真实设备反复验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
