.container{
  flex-direction: column;
  display: flex;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  margin-left: 0rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}
.VideoImage{
  /*position: relative;*/
  margin: 20rpx,20rpx,20rpx,20rpx;
  width: 80%;
  height:400rpx;
  border-radius: 20rpx;
  overflow: hidden;
  z-index: -1;
}
.play-btn{
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  top: 50%;
  left: 50%;
  z-index: 100;
  
  /*transform: translateX(-50%) translateY(-50%);*/
}
我的两个css想实现图片叠加的效果来展示视频播放列表，一个是视频封面，一个是视频播放的按钮。
如果 在 VideoImage中选择使用position: relative，则视频列表的图片会排列的很诡异。
如果不用，两个图片是并列排布的，没有实现叠加效果。
求大神指导。