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

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.

You put position absolute, but the top and left values are in percentages. What exactyl do you want to achieve? Can you show an example ? — Ely, May 11 '15 at 12:09
I just want to make button and equalizer be in fixed position on different screen sizes. — Mustafa Diaa, May 11 '15 at 12:26
It is not clear to me. What does it mean fixed position on different screen sizes? E.g. the element is always 50px from top and 50px from right ? — Ely, May 11 '15 at 13:14

score 0 · Answer 1 · answered May 11 '15 at 13:33

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.

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

1 Answers1