nvue v-if 产生 view 的 z-index 不起效

nvue v-if 产生 view 的 z-index 不起效 , 为什么 zIndex: 9 的会在 zIndex:99 的上面，只是因为 mask2 是 v-if 渲染的，请解答下

<template>  
  <view>  
    <view class="mask1">  
      mask1 zIndex: 99  
    </view>  

    <view class="mask2" v-if="showMask2">  
      mask2 zIndex: 9  
    </view>  

    <button @tap="showMask2 = !showMask2">toggle mask2</button>  
  </view>  
</template>  

<script>  
  export default {  
    onLoad() {},  
    data() {  
      return {  
        showMask2: false  
      };  
    },  

    created() {},  
    methods: {}  
  };  
</script>  

<style>  
  .mask1 {  
    z-index: 99;  
    background-color: red;  
    position: fixed;  
    top: 200rpx;  
    left: 0;  
    width: 400rpx;  
    height: 200rpx;  
  }  

  .mask2 {  
    z-index: 9;  
    background-color: blue;  
    position: fixed;  
    top: 300rpx;  
    left: 190rpx;  
    width: 400rpx;  
    height: 200rpx;  
  }  
</style>