html - 绝对位置在滚动条上没有固定位置

Question

所以我试图制作一个音乐应用程序，当我滚动时，我的位置绝对弄乱了整个布局

我尝试在互联网上搜索有关保持父position:relative但没有用的信息

我的 HTML-

<div style="width:inherit;height:inherit;overflow:hidden" >
  <div class="ov" ><div><i style="font-size:2em;" class="fa fa-pause-circle"></i></div></div>

我的 CSS-

.ov{

    width:12em;
    overflow: hidden;

    justify-content: center;
    text-align: center;
    flex-direction: column;

    border-radius: 15px;
    height: 12em;
    opacity:0.8;
    position: absolute;
    z-index:2;
    background-color: black;

}

它应该是什么样子 - ( https://imgur.com/sSPyUOr )
滚动时的外观 - ( https://imgur.com/LteKyq6 )

Answer 1

如果您试图使对象不随网站滚动，您可以使用 position:fixed;

Position:absolute 只是将基于最近容器的对象与 position:relative 对齐。