开发者工具版本：

宿主操作系统：win10

任务目标：在camera视野上显示叠加的按钮

开发者工具上截屏（“设置”按钮可以正常显示）：

手机上截屏（“设置”按钮没能显示）：

进一步调试：将camera组件中的参数“width”改为50%，则“设置”按钮出现。这个测试表明手机上不能显示的原因是camera视野将“设置”挡住了。请问这个问题如何解决？

【wxml代码】

<view class="page-body">

<view class="page-body-wrapper">

<camera device-position="back" flash="off" frame-size="large" binderror="error" style="width: 100%; height: 1000rpx;"></camera>

<view class="btn-area">

<button type="primary" bindtap="takePhoto">拍照</button>

</view>

</view>

</view>

<view class="status-box">

<label>已拍：{{imgNum}}</label>

</view>

<view class="setting-box">

<navigator url="/pages/settings/settings" open-type="navigate">设置</navigator >

</view>

【wxss代码】

.page-body {

padding: 20rpx 0;

}

.page-body-wrapper {

z-index: -1;

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

}

.setting-box {

height: 100rpx;

width: 100rpx;

background-color: transparent;

border-radius: 100%;

position: fixed;

top: 30rpx;

right: 10rpx;

display: flex;

align-items: center;

justify-content: center;

z-index: 9;

border: 5rpx solid #fff;

}

.setting-box navigator {

font-size: 32rpx;

max-width: 80rpx;

color: #fff;

text-align: center;

}

.status-box {

background-color: transparent;

position: absolute;

top: 30rpx;

left: 10rpx;

display: flex;

align-items: center;

justify-content: center;

/*z-index: 9;*/

border: 5rpx solid #fff;

color: #fff;

font-size: 32rpx;

}