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

Question

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

我尝试在互联网上搜索关于保留 parent 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 对齐。

Answer 2

给第一个divposition:absolute；最好给它和 id 或 class 然后 .ov{position:relative} ;

.ov{

    width:12em;
    overflow: hidden;

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

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

}

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

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

Position absolute doesnt have fixed place on scroll

html

css

position

css-position

absolute