absolute 元素的百分比寬高 是相對于其最近的 父級(jí)別的absolute／relative 元素來計(jì)算的（如沒有則對body）
相對應(yīng)的數(shù)值為 自身區(qū)域＋ padding 的區(qū)域總和
image.png
image.png
.video-avatar-item{
display: inline-flex;
margin: 2px 10px 2px 10px;
padding: 0;
border-radius: 50%;
background-color: #000;
border-color: #fff;
overflow: hidden;
width: 64px;
height: 64px;
position: relative;
video{
width:64px;
height:64px;
object-fit: cover;
cursor: pointer;
}
video.video-stream.camera{
position: relative;
}
.local-client video.video-stream.camera{
//left: unset;
//border-radius: 50%
}
.overlay-wrapper {
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
z-index:200;
display:block;
background:rgba(0, 0, 0, .7)
}
}
<div className={videoAvatarItem}>
<div className={`${styles['local-client']}`}>
<div className={`${styles['overlay-wrapper']}`}></div>
<video onClick={this.toggleVideo} key={'videoavatar_local'} id={'videoavatar_'+username} vtype='local' className={videoRtcClass} username={username} poster={poster} />
</div>
</div>
