微信小程序：降低image层级，重叠排版方法

 像这种怎样排版呢？

一般的方法，是白底圆角矩形的“margin-top: -80rpx;”这样就达到白底圆角矩形上移，压在图片上的效果。

但是微信小程序image层级很高，按照这种方法，显示的确实如下：

 微信小程序的文字跑image上了，白色圆角矩形跑image底下了，这种怎么处理叻？

用它“display: inherit;”

inherit

规定应该从父元素继承 display 属性的值。

 由上图所看的层级是上到下：文字、image、白色圆角矩形，目前我要达到的效果是：文字、白色圆角矩形、image；

只要将image的显示跟随父元素，就达到我们想要的效果了

具体代码如下：

wxml：

<view class="info_banner">
   <image src="../../base/img/item_04.jpg" mode="widthFix"></image>
</view>
<view class="info_con info_head">
     <view class="info_tl">
       <text class="info_tl1">我是标题</text>
       <view class="info_tl2">
         <icon class="iconfont icon-money"></icon>
         <text>均价：12000元/㎡</text>
       </view>
     </view>
 </view>

wxss： 

page{ background: #efecf5;}
.info_banner image{ width: 100%;display: inherit; }

.info_con{ width: 640rpx; margin: 0 auto; padding: 20rpx; background: #ffffff; border-radius:15rpx; margin-bottom: 20rpx;}
.info_head{ margin-top: -80rpx;}

.info_tl,.info_list{ display: flex;font-size: 30rpx; justify-content: space-between; line-height: 40rpx; padding:15rpx 25rpx; border-bottom: 1rpx solid #d3d3d3;}
.info_tl1{ font-weight: bold; vertical-align: middle;}
.info_tl2 text{ font-size: 20rpx;}