微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】

一、这是模拟器上的效果

二、这是苹果11真机上的效果（安卓真机正常）

三、先来理一下代码的层级现状

• A 为van-tabs
• B 是自定义组件，为数据列表，C为单个数据
• D 也是自定义组件（图中省略）为单个数据详情弹窗，且D是B的子组件！

在z-index层级上

• A是相对定位，B、C无定位，所以A>B
• D设置z-index 9999 但不生效

四、理清楚之后，有一个大胆的猜想：

B、D均为自定义组件，且D是B的子组件，会不会导致D的层级最高只能和B一样高？导致不能穿透B，所以被A组件盖住？

五、调整组件父子关系

为了验证是否有这个问题，我将组件D从组件B中剥离，放在与A、B同级的wxml引入，果然，苹果11上恢复正常

为了更好的理解这个问题，所以我将其定义成：ios自定义组件层级不穿透。正确的做法，把需要有更高层级的组件，放在更外层

欢迎留言，我们一起探索更多~