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

【问题标题】：Position absolute doesnt have fixed place on scroll绝对位置在滚动上没有固定位置
【发布时间】：2019-03-28 14:01:36
【问题描述】：

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

我尝试在互联网上搜索关于保持父母位置：相对但没有工作

我的 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)

【问题讨论】：

你的意思是它应该定位在图像上？
您可以将第一个 div 设置为绝对，将 .ov 设置为相对
如果你可以创建一个 sn-p 或者你可以发布你的代码以便我们测试它

标签： html css position css-position absolute

【解决方案1】：

如果你试图让一个对象不滚动你使用position:fixed;的网站

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

【讨论】：

【解决方案2】：

给出第一个div的位置：绝对；最好给它和 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>

【讨论】：