Question

我有3个按钮需要保持固定在页面的右下角。

Example

但是当我设置position:fixed时，它会直接上升到顶部（也是固定的）。

我怎样才能让他们留在那里，但当我向上滚动跟随我？

谢谢！

Answer 1

添加position: fixed; bottom: 0;，然后移除top:0;，bottom属性设置元素的下边缘。

试试这段代码：

<强> DEMO

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

Answer 2

删除

top:0

并设置

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

问题在于top:0;由于您需要按住按钮以固定在页面的右下角，因此您应该使用bottom: 0;position: fixed;

更新以下部分

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

到下面给出的那个，

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

它会像魅力一样发挥作用。

进行了一些更改，请参阅演示..

更新： See demo

Answer 4

将所有内容包裹在container中，并将其置于relative
使用#buton

absolute

bottom:0

让myButton独立于任何职位

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

页脚按钮固定？

4 个答案: