页脚按钮固定？答案

【问题标题】：Footer buttons fixed?页脚按钮固定？
【发布时间】：2014-03-18 00:53:39
【问题描述】：

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

Example。

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

我怎样才能让他们留在下面，而当我向上滚动跟随我时？

谢谢！

【问题讨论】：

标签： html css button fixed

【解决方案1】：

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

试试这个代码：

DEMO

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

【讨论】：

好些了，它跟随滚动，但它没有定位在角落里。
Manoj，这很好，但它们固定在
上。我怎样才能让它们降低？
几乎完美，但我会处理它（按钮离

【解决方案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

【讨论】：

仍然没有定位在角落里。如果我保持窗口最大化，它会重叠在我在那里的一张桌子上。它高于

【解决方案3】：

将所有内容包装在 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】：

问题出在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

【讨论】：