微信小程序15__view 层叠展示

先看效果图：

 

对应wxml布局：

      
      
        MISS时尚穿搭教程
        192人观看
      
    
    

    
      
      
        MISS时尚穿搭教程
        192人观看
      
    

对应wxss文件，如下：

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

  border-bottom: 1px solid orange;
  margin-top:5px;
}

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

}
.special-topic-content-left{
  color:#ffffff;
  margin-bottom:40px;
}

.special-topic-content-right{
  color:blue;
  margin-bottom:40px;
  margin-right:10px;
  font-size: 20px;
}