如何使javascript按钮在不同屏幕尺寸上的固定位置？答案

【问题标题】：How to make javascript button be in fixed place on different screen sizes?如何使javascript按钮在不同屏幕尺寸上的固定位置？
【发布时间】：2015-05-11 11:48:20
【问题描述】：

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

按钮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>

css代码：

#playback {
position: absolute;
top: 30%;
left: 40%;
width:auto;
color:white;
}

#player:after {
        position: absolute;
        content: '';
        width: 150px;
        height: 150px;
        left: 0;
        color:white;
        border-radius: 50%;
        -webkit-transform: rotate(4deg);
        transform: rotate(-75deg);
}

#playback {
        position: absolute;
        color:white;
        left:29.7%;
        top:46.25%;
        text-shadow: 0 0 40px #fff;
}

.fa-stop{
        margin-left:-0.46%;
}

#player{
        -moz-transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
}

#player:hover{
        box-shadow: 0 0px 20px #fff;
}

我已经尝试将显示块、边距自动、位置设置为绝对，并确定顶部和左侧位置。

#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;
}

但仍然无法正常工作。知道如何解决这个问题吗？提前致谢。

【问题讨论】：

您放置绝对位置，但顶部和左侧的值是百分比。你想达到什么样的精确度？你能举个例子吗？
我只是想让按钮和均衡器在不同的屏幕尺寸上处于固定位置。
我不清楚。在不同的屏幕尺寸上固定位置是什么意思？例如。元素总是距离顶部 50 像素，距离右侧 50 像素？
没错，一个响应式按钮

标签： responsive-design responsive-slides

【解决方案1】：

尝试使用以下sn-p。

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

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

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

【讨论】：