小程序视图view重叠展示示例

类似如图背景图片底部显示半透明文本view：

image

.wxml

    <view class="special-topic">
      <image style="width: 100%; height: 350rpx" src="/images/special_pic1.jpg"></image>
      <view class="special-topic-content">
        <view class="special-topic-content-left">MISS时尚穿搭教程</view>
        <view class="special-topic-content-right">192人观看</view>
      </view>
    </view>

.wxss

.special-topic {
  width: 100%;
  height: 350rpx;
  display: flex;
  /* 从最下面开始布局 */
  align-items: flex-end; 
  background: whitesmoke;
  position: relative;
}

.special-topic-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  background: rgba(0, 0, 0, 1);
  opacity: 0.4;
  align-items: center;
  position: absolute;
}

要点：父视图的position: relative; 重叠放置在父视图上的视图postion: absolute。