uniapp底部导航栏层级过高无法覆盖问题

对于这个问题，可以通过设置 z-index 属性来解决。在 uniapp 中，可以在页面的 style 中设置 .uni-tabbar 的 z-index 值为较小的数值，例如 99，这样就可以让页面的其他元素覆盖在底部导航栏之上了。

相关问题

uniapp中video标签层级过高

在uniapp项目中，如果video标签的层级过高，会导致页面滑动时可能会遮挡顶部导航栏或弹窗效果。解决这个问题可以使用subNVues进行配置。在pages.json文件中，可以通过以下配置来解决这个问题：
{
"path": "pages/index/index",
"style": {
...
}
}

此外，如果要创建一个预览图片并添加点击事件，可以使用以下代码：
<image src="@/static/image/bofang.png" alt="" style="width: 350rpx; height: 280rpx; position: relative;" @click="onIsVideo(videoSrc)">

如果要创建一个用于预览的video标签，可以使用以下代码：
<video :src="onVideoSrc" x5-video-player-type="h5-page" :autoplay='true' v-show="false" style="width: 100vw; height: 100vh;" id="video_play"></video>

另外，在js代码中，可以通过以下代码来处理点击事件并解决视频遮挡的问题：
onIsVideo(src){
// 获取视频地址
this.onVideoSrc = src
// 获取video上下文对象
this.videoContext = uni.createVideoContext('video_play');
// 进入全屏状态
this.videoContext.requestFullScreen();
}
以上是解决uniapp中video标签层级过高问题的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题](https://download.csdn.net/download/weixin_42216995/87842998)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。](https://blog.csdn.net/haliboti/article/details/121927980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

uniapp video组件层级过高遮挡其他元素

uniapp的video组件是用于播放视频的，它在渲染时会创建一个视频画面的层级，这可能会使得其覆盖到其他元素上面，导致其他元素被遮挡。

解决这个问题的方法有以下几种：

1. 使用CSS调整层级：可以通过在video组件上设置CSS样式，将其层级调整为较低的值，比如设置z-index属性为较小的值，确保其他元素的层级高于video组件。

2. 使用position属性调整布局：可以将video组件的父元素设置为相对定位或绝对定位，然后通过调整其位置和层级，将video组件放置在合适的位置，避免遮挡其他元素。

3. 调整布局结构：如果video组件的层级堆叠问题比较严重，可以考虑重新设计页面布局，将video组件放置在其他元素的后面，或将其他元素移动到video组件的前面，确保元素间的层级关系正确。

4. 使用遮罩层：如果以上方法无效，可以使用遮罩层来覆盖video组件，遮罩层可以是一个透明的div元素，通过设置其层级高于video组件，从而避免video组件遮挡其他元素。

总之，解决uniapp video组件层级过高遮挡其他元素的问题需要根据具体的情况选择合适的解决方法，通过调整层级、布局结构或使用遮罩层等方式，确保video组件和其他元素之间的层级关系正确，以达到预期的UI效果。