How to make a button stay at a bottom of a screen?

Refresh

February 2019

Views

3.5k time

1

I've got a button that I want to stay at the bottom of the screen, no matter how you scroll the page up or down the page. I need it to stay a fixed distance away from the bottom of the window.

How do I make it sticky like this?

4 answers

0

To keep the button fixed at the bottom of the page even when scrolled:

button { 
  position:relative; 
  margin-top:100%; 
  left:50%; 
} 

JSFiddle

To position button at the bottom of the page but move with the scroll:

button{
        position:absolute;
        bottom: 5%;
        right:50%;
    }

JSFiddle

1

CSS

button {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

something like that.

1

just add below css:

button{
    position:fixed;
    left:10px;
    bottom:10px;
}
2

To keep any element fixed on page irrelevantto scroll you need to make it position fixed

Please check below CSS

button {
    position: fixed;
    bottom: 0;
    right: 0;
}