2***@qq.com
2***@qq.com
  • 发布:2020-08-04 17:42
  • 更新:2020-09-08 17:42
  • 阅读:1550

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

分类:nvue

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>  
2020-08-04 17:42 负责人:无 分享
已邀请:
6***@qq.com

6***@qq.com

nvue中不支持z-index控制层级,越靠后的代码层级越高

2***@qq.com

2***@qq.com (作者)

在 web 和 微信小程序 上表现正常, iphone7 和 小米手机 上都是有问题的

要回复问题请先登录注册