简体   繁体   中英

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

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?

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

just add below css:

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

CSS

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

something like that.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM