How to make javascript button be in fixed place on different screen sizes? - responsive-design

Question

when I view my website on different screen sizes, the button and equalizer move to different points. so how to make it's position fixed on any screen size?
button html code:
<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 code:
#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;
}
I've tried to make the display block, margin auto, position absolute, and determine top and left position.
#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;
}
but still not working. any idea how to fix this issue?
thanks in advance.

Answer 1

Try to use following snippet.
position:absolute;
top: 50;
right:0;
In your example you use percentages. I think what you should use is absolute numbers (in pixels for example).
The element will be placed at the top right with 50 pixels distance to the top.