视频列表，图片叠加问题怎么会失败?
.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，则视频列表的图片会排列的很诡异。
如果不用，两个图片是并列排布的，没有实现叠加效果。
求大神指导。
