Question

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

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

但仍无效。任何想法如何解决这个问题？提前谢谢。

Answer 1

尝试使用以下代码段。

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

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

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

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

1 个答案: