view的重叠问题

废话不多说先看效果!

这个布局如何实现对于新手的我来说还是比较难的 研究了半天搞出来了

 <view class = "view-groupComponent">
        <view class = "view-component">
          <view class = "view-componentL">
              <view class = "view-mixtureImg">
                  <image src="../../images/head.jpg" class = "img-rectStyle"   ></image> 
                  <image src="../../images/icon_champion.png" class = "img-wrapRect" ></image>
              </view>
              <view >
                    <text class = "text-ellipsiStyle">青春梦想队</text>  
              </view>
          </view>

样式

/*图像*/
.view-mixtureImg{
  height: 200rpx;
}

.img-rectStyle{
  width:  170rpx;
  height: 170rpx;
  border-radius: 15rpx;
}

.img-inside{
  width:  180rpx;
  height: 180rpx;
  border-radius: 50%;
}

/*外部边框图*/
.img-wrap{
  width: 260rpx;
  height: 200rpx;
  position: relative;
  bottom: 200rpx;
  text-align: center;
}

还有另一种效果

布局

     <block wx:for="{{groups}}" wx:key = "{{index}}">
              <view class = "view-groupItem">
                  <view class = "view-memberClickNum">
                      <image src="{{item.groupImg}}"></image>
                        <text  class = "text-itemNum">0</text>  
                  </view>
                  <text class="text-groupName">{{item.groupName}}</text>
              </view>
          </block>

样式

/*用户的图像*/
.view-groupItem{
  display: inline-block;
  width: 115rpx;
  height: 120rpx;
  margin: 10rpx;
  text-align: center;
  margin-top: 20rpx;
}

.view-memberClickNum{
  position: relative;

}

.view-memberClickNum image{
  width: 115rpx;
  height: 115rpx;
  border-radius: 15rpx;
}

.text-groupName{
  font-size: 26rpx;
  width: 115rpx;
  display: block;
  overflow: hidden;
  color: #978378;
  word-break: keep-all;
  white-space: nowrap; 
  text-overflow: ellipsis;
}