Footer buttons fixed?

Question

I have 3 buttons that I need to stay fixed in the lower right corner of the page.

Example.

But when I set position:fixed , it goes straight up to the top (which is also fixed).

How can I make them stay down there, yet when I scroll up to follow me?

Thank you!

Answer 1

Add position: fixed; bottom: 0; ,and remove the top:0;,the bottom property sets the bottom edge of an element.

Try this code:

DEMO

#buton{text-align:right;
    height: 100px;
    width: 100%;
    z-index: 100;
    position: fixed;
    bottom: 0;
    }

Answer 2

Remove

top:0

and set

bottom:0; position: fixed; right: 0;

#buton {
text-align: right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
right: 0;
}

See Fiddle Demo

Answer 3

• Wrap everything in a container and give it position relative

• make #buton absolute with bottom:0

• keep myButton independent of any position

working demo

html,body{
    height:100%; /* important */
}
#conatiner {
    position: relative;/* added*/
    height:100%;/* important */
}
#buton {
    text-align:right;
    width: 100%;
    z-index: 100;
    position: absolute;/* added*/
    bottom: 0;
}

Answer 4

The problem is with top:0; Since you need the buttons to stay fixed in the lower right corner of the page you should use bottom: 0;position: fixed;

Update the below part

    #buton{
    text-align:right;
    height: 100px;
    top: 0;
    width: 100%;
    z-index: 100;
    }

to the one given below,

   #buton{
   text-align:right;
   height: 100px;
   bottom:0;
   position: fixed;
   width: 100%;
   z-index: 100;
  }

It will work like a charm.

Have made some changes, see the demo..

UPDATE : See demo