Responsive design 如何使javascript按钮在不同大小的屏幕上处于固定位置？

当我在不同大小的屏幕上查看我的网站时，按钮和均衡器会移动到不同的点。那么，如何使它的位置固定在任何屏幕大小上呢

按钮html代码：

<div id="player" class="player">
  <i id="playback" class="fa fa-play fa-3x"></i>
</div>

<audio controls loop style="display:none">
    <source src="http://streaming.radionomy.com/MSTC-CHI" type='audio/ogg'>
    <source src="http://streaming.radionomy.com/MSTC-CHI" type='audio/mpeg'>
</audio>

我试着使显示块、边距自动、位置绝对，并确定顶部和左侧位置

#player {
        display: block;
        margin: 0 auto;
        top: 46%;
        left: 30%;
        position: absolute;
}

#music-bar {
        display: block;
        margin: 0 auto;
        top: 75%;
        left: 58%;
        position: absolute;
}

但仍然不起作用。你知道如何解决这个问题吗？

---

提前感谢。

尝试使用以下代码片段

  position:absolute;
  top: 50;
  right:0;

在您的示例中，使用百分比。我认为你应该使用绝对数（例如像素）

---

元素将放置在右上角，距离顶部50像素。

您将位置设置为绝对位置，但顶部和左侧的值以百分比表示。你想要达到什么目标？你们能举个例子吗？我只是想让按钮和均衡器在不同的屏幕尺寸上处于固定位置。我不清楚。不同屏幕尺寸上的固定位置是什么意思？例如，该元件始终从顶部起50像素，从右侧起50像素？确切地说，是一个响应按钮

  position:absolute;
  top: 50;
  right:0;