HTML 应该怎样将图片的一半悬浮在框外面

如图：

该图为哔哩哔哩网页版鼠标移到个人头像时出现的
想问问应该怎样将头像悬浮一半在框外面

使用 position:relative设置容器，图片设置 position:absolute，top:-200px 可以

使用正常容器，图片 margin-top:-200px 也可以

css样式，将弹窗相对定位到头像的一半位置，然后设置z-index的值，头像给2，弹窗给1