小程序Checkbox被固定导航栏遮挡了怎么办？-css教程-PHP中文网

小程序Checkbox被固定导航栏遮挡了怎么办？

DDD

发布： 2025-02-26 16:12:26

原创

246人浏览过

小程序checkbox被固定导航栏遮挡了怎么办？

小程序Checkbox遮挡问题及解决方案

小程序开发中，页面元素遮挡问题时有发生。本文以Checkbox被固定导航栏遮挡为例，分析并提供解决方案。

问题描述：

在包含固定导航栏和多个Checkbox的选择页面中，当页面内容超出屏幕高度需要滚动时，Checkbox不被导航栏遮挡，而其他内容却被遮挡。页面使用Flex布局，Checkbox位于带背景色的view容器内。代码如下：

布局代码：

苏打办公

360旗下的办公工具导航，优质海量工具

查看详情

<code class="html"><view class="cate_num">
  <view class="cate_num1 cate_style">{{item.sumdays}}days{{item.task[0].name}}<checkbox></checkbox><iconfont name="{{item.task[0].icon_name}}" size="50"></iconfont></view>
  <view class="cate_num2 cate_style">{{item.sumdays}}days{{item.task[1].name}}<checkbox></checkbox><iconfont name="{{item.task[1].icon_name}}" size="50"></iconfont></view>
  <view class="cate_num3 cate_style">{{item.sumdays}}days{{item.task[2].name}}<checkbox></checkbox><iconfont name="{{item.task[2].icon_name}}" size="50"></iconfont></view>
  <view class="cate_num4 cate_style">{{item.sumdays}}days{{item.task[3].name}}<checkbox></checkbox><iconfont name="{{item.task[3].icon_name}}" size="50"></iconfont></view>
</view></code>

登录后复制

样式代码：

<code class="css">.cate_num {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 50%;
  justify-content: space-evenly;
}

.cate_num1, .cate_num2, .cate_num3, .cate_num4 {
  width: 315rpx;
  height: 170rpx;
  margin: 20rpx;
  border-radius: 1em;
  font-family: '楷体';
  font-size: 30rpx;
  color: rgb(77, 76, 76);
}

/* 背景颜色样式 */
.cate_num1 { background-color: rgb(211, 231, 255); }
.cate_num2 { background-color: rgb(255, 215, 225); }
.cate_num3 { background-color: rgb(255, 222, 196); }
.cate_num4 { background-color: rgb(249, 255, 221); }

.cate_style {
  /* 其他样式 */
}</code>

登录后复制

问题根源： 导航栏与Checkbox的层级关系导致遮挡。

解决方案：

调整导航栏和Checkbox的层级关系是解决问题的关键。可以通过设置导航栏的z-index属性为一个较大的值（例如z-index: 10），确保其位于Checkbox之上。同时，也需要检查Checkbox父元素的层级设置，确保其层级不高于导航栏。建议使用更具区分度的z-index值，避免层级冲突。如果问题仍然存在，请检查页面其他元素的z-index属性，并进行相应的调整。

以上就是小程序Checkbox被固定导航栏遮挡了怎么办？的详细内容，更多请关注php中文网其它相关文章！