遮罩层必须用 position: fixed; inset: 0；搜索框居中用 flex 而非 top/transform；pointer-events: none 需配合子元素 pointer-events: auto；背景透明度用 rgba() 而非 opacity；过渡用 background-color 而非 opacity。
遮罩层必须用 position: fixed + inset: 0
用 position: absolute 或 position: relative 都会漏白——前者依赖父容器高度，后者根本不会脱离文档流；100% 宽高继承自父级，而 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) 动态插入，确保挂载在 下。
搜索框居中必须靠 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，除非你真需要点击关闭——否则干扰事件流 - 移动端 iOS Safari 有延迟点击机制，若遮罩是
opacity: 0或visibility: hidden，根本拦不住点击，必须用display: none或真实 DOM 移除
背景透明度要用 rgba()，别碰 opacity
opacity: 0.6 会让整个遮罩及其子元素（包括搜索框文字、图标）一起发虚，iOS Safari 渲染锯齿明显，安卓部分 WebView 甚至导致点击区域失效。真正干净的方案是只控制背景色透明度。
推荐写法：
-
background-color: rgba(0, 0, 0, 0.7);（深色遮罩）或rgba(255, 255, 255, 0.85);（浅色） - 不要混用
background-image或渐变，多重叠加易过暗 - 旧版 Android 4.3 不支持
rgba()？加降级：background-color: #000; - 过渡动画用
transition: background-color 0.2s ease-out;，不是opacity
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
