微信小程序重叠排版,降低image层级问题

问题描述:预期效果如图左,白色背景区域重叠在绿色区域背景之上,绿色区域部分是一张图片。实际效果却是右边的样子。设置z-index等,都不生效
在这里插入图片描述
视图文件:

<view class="page-wrap">
  <view class="page-bg">
    <image class="page-bg" src="/images/page_bg.png" mode="aspectFill"></image>
  </view>
   <view class="head-wrap">
  	//这个地方是绿色背景中的内容
  </view>
  <view class="page-menu">
    
  </view>
  </view>
  <button class="btn-out">操作</button>
</view>

关键部分css及解决办法:.page-wrap .page-bg image 给图片设置一个display:inherit .图片跟随父元素即可~

.page-wrap {
  height: 100%;
  width: 100%;
}
.head-wrap {
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 20rpx;
  padding-bottom: 50rpx;
  margin-top: 16rpx;  
  margin-top: -290rpx;
  height: auto;
  overflow: hidden;
}
.page-wrap .page-bg {
  width: 100%;
  height: 310rpx;
}
.page-wrap .page-bg image{
  display: inherit;
}

.page-wrap .page-menu {
  border: 1rpx solid #eee;
  box-shadow: 0px 1rpx 4rpx 0px rgba(85, 85, 85, 0.2);
  border-radius: 10rpx;
  margin-left: 27rpx;
  margin-right: 23rpx;
  height: auto;
  overflow: hidden;
  margin-top: -53rpx;
}

原文连接:https://blog.csdn.net/honeycandys/article/details/121422904

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?