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

Refresh

February 2019

Views

3.2k 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

Для того, чтобы держать кнопку фиксированной в нижней части страницы, даже при прокрутке:

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

JSFiddle

Для размещения кнопки в нижней части страницы, но и двигаться со свитком:

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

JSFiddle

1

CSS

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

что-то вроде того.

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