6***@qq.com
6***@qq.com
  • 发布:2022-09-05 22:04
  • 更新:2022-09-06 11:19
  • 阅读:1110

【报Bug】nvue页面position z-index层级问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: Alpha

HBuilderX版本号: 3.6.0

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: 红米k10

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<view class="line-progress-text">
<text class="line-progress-t">10'26''</text>
</view>
<view class="line-progress-active">
<image class="progress-active-img" src="/static/image/rank_l.png"></image>
<image class="progress-active-img" src="/static/image/rank_r.png"></image>
</view>

.line-progress-text{
position: absolute;
z-index: 2;
padding: 0 18rpx;
height: 32rpx;
top: 0;
bottom: 0;
justify-content: center;
align-items: center;
}
.line-progress-active{
position: absolute;
z-index: 1;
flex-direction: row;
align-items: center;
justify-content: center;
}

操作步骤:

设置position: absolute 时第一个元素设置了z-index:99;第二个设置为z-index:1;但会出现第二个元素覆盖第一个元素

预期结果:

实际结果:

bug描述:

设置position: absolute 时第一个元素设置了z-index:99;第二个设置为z-index:1;但会出现第二个元素覆盖第一个元素

2022-09-05 22:04 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

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

要回复问题请先登录注册