ios safari遮罩层“漏底”或“上浮”主因是100vh含地址栏高度且fixed元素不响应其变化，应改用height: -webkit-fill-available或js动态设height；z-index无效多因父级创建了层叠上下文，需将遮罩插入body末尾并确保根上下文；居中推荐flex+center，禁用margin:auto和place-items；防溢出需避免100vw/100vh、设overflow:hidden及touch-action:none。
遮罩层在iOS Safari里“漏底”或“上浮”
根本不是CSS写错了，而是100vh在iOS Safari中把地址栏高度算进去了，但position: fixed元素不响应地址栏收起/展开——导致遮罩高度忽大忽小，尤其键盘弹出时直接悬空。
- 别用
height: 100vh或100svh：前者跳变，后者Safari支持极差（iOS 16.4+才实验性支持，且需viewport-fit=cover） - 改用
min-height: 100%+height: -webkit-fill-available（iOS专属），同时确保html, body { height: 100% } - 最稳方案是JS动态设置：
overlay.style.height = window.innerHeight + 'px'，并在resize和focusin（键盘弹出）时触发
遮罩没盖住内容，z-index明明设了却无效
不是数值不够高，而是z-index被父容器的层叠上下文截断了——常见于transform、opacity: 0.99、filter或will-change等属性。
- 用开发者工具检查遮罩层的“Computed → Stacking level”，若显示非
(root)，说明它被锁在某个父容器的层叠上下文中 - 把遮罩DOM直接插入
document.body末尾，避开所有带transform的布局容器 -
z-index设为9999或更高，但前提是它和页面其他关键组件（如导航栏、第三方地图控件）同属根层叠上下文
遮罩层边缘留白或右侧溢出
直接写top: 0; right: 0; bottom: 0; left: 0看似稳妥，但滚动条宽度、页面缩放、父元素transform都会干扰锚定效果。
- 避免用
width: 100vw; height: 100vh：100vw包含滚动条宽度，会导致水平溢出 - 确保遮罩层
display不是inline或inline-block——它们会忽略top/right/bottom/left - 给
body加overflow: hidden防滚动穿透，同时加touch-action: none阻止iOS拖拽偏移
弹窗内容在遮罩里无法居中
别用margin: auto，它在position: fixed下行为不一致；也别依赖place-items: center——Safari 15.4之前不稳。
- 遮罩层设
display: flex; justify-content: center; align-items: center，子弹窗无需任何定位 - 弹窗自身加
max-width: 90%和width: fit-content，防止小屏溢出 - 如果用
grid，拆开写align-items: center和justify-content: center，兼容性更广
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
