iOS导航栏遮挡下拉菜单的根本原因是父容器同时存在overflow: hidden和position: relative，创建了独立层叠上下文，使子元素z-index失效；应移除或调整overflow: hidden位置，并确保触发器仅设position: relative而不设z-index。
为什么iOS上z-index再高也盖不住导航栏
根本不是z-index设低了，而是父容器（比如 .header 或 .topnav）同时满足两个条件：overflow: hidden + position: relative（哪怕没写z-index）。这会强制创建一个独立的层叠上下文，子元素的 z-index: 9999 只在这个“盒子”里有效，跨不出去——所以再高的数字也压不过兄弟元素。
overflow: hidden 是 iOS 下拉菜单最隐蔽的杀手
很多开发者为“防内容溢出”给导航栏加了 overflow: hidden，却不知道 Safari（尤其是 iOS 15+）对它的裁剪更严格：不仅视觉截断，还会干扰 position: absolute 的定位参考，导致菜单位置偏移或直接消失。
- 检查 DevTools 中下拉容器的 computed
overflow值，确认是否继承自某个祖先 - 不要用
overflow: hidden清浮动——改用::after { content: ""; display: table; clear: both; } - 如果必须保留裁剪效果（如圆角阴影），把
overflow: hidden移到更外层不包含下拉菜单的容器上
position: relative 必须加在触发器上，且不能带 z-index
下拉菜单是 position: absolute，它需要一个“定位上下文”作为参考。这个上下文必须来自直接父级（比如 .dropdown），且该父级不能自己创建新的层叠上下文。
- 给触发元素（如
.nav-item或.dropdown）加position: relative—— 这一步不可省 - 绝对不要给这个触发器设
z-index: 0或任何值，否则它就变成层叠上下文的“天花板” - 确保下拉容器（
.dropdown-menu）的top: 100%是相对于这个relative父级计算的，而不是body
iOS Safari 对 fixed/absolute 的渲染差异要单独处理
iOS Safari 在某些版本中会对 position: absolute 元素做额外的合成层判断，尤其当父级有 transform 或 will-change 时，容易意外降级为软件渲染，导致层级错乱。
立即学习“前端免费学习笔记（深入）”；
- 避免在触发器或其祖先上滥用
transform: translateZ(0)或will-change: transform - 下拉菜单本身可加
backface-visibility: hidden防止 iOS 渲染抖动 - 若仍不稳定，把
.dropdown-menu挂到body下（JS 动态 append），并用getBoundingClientRect()手动计算位置
z-index，而是某个祖先悄悄用 overflow: hidden + position: relative 给整个下拉路径焊死了一道门。打开它，比堆数字重要得多。 
