如何在页面右下角添加固定按钮答案

【问题标题】：How to add fixed button to the bottom right of page如何在页面右下角添加固定按钮
【发布时间】：2013-10-11 20:44:44
【问题描述】：

我在网页底部添加固定按钮时遇到了一些问题。一直在用像素测试不同的数字，但按钮没有显示在右侧页面下方。

HTML

<a href="#head"><img src="upbutton.png" id="fixedbutton"></a>

CSS

.fixedbutton {
    position: fixed;
    bottom: 560px;
    right: 1000px; 
}

【问题讨论】：

您应该使用#fixedbutton 作为选择器。

标签： html css button uibutton

【解决方案1】：

您在 CSS（类）中指定 .fixedbutton 并在元素本身上指定 id。

将您的 CSS 更改为以下内容，这将选择 id 固定按钮

#fixedbutton {
    position: fixed;
    bottom: 0px;
    right: 0px; 
}

这是jsFiddle JoshC 的礼貌。

【讨论】：

我实际上将它命名为 td#fixedbutton，所以现在它出现了。但按钮未与我想要的位置对齐。
嗯，你想要它在哪里？
设置为零时不要使用 px 后缀。
此答案仅适用于桌面设备，在移动设备上存在一些问题。我找不到任何解决方案。
这使得按钮与 chrome v.62 中的滚动条重叠

【解决方案2】：

这将有助于右下角圆形按钮

HTML：

      <a class="fixedButton" href>
         <div class="roundedFixedBtn"><i class="fa fa-phone"></i></div>
      </a>

CSS：

       .fixedButton{
            position: fixed;
            bottom: 0px;
            right: 0px; 
            padding: 20px;
        }
        .roundedFixedBtn{
          height: 60px;
          line-height: 80px;  
          width: 60px;  
          font-size: 2em;
          font-weight: bold;
          border-radius: 50%;
          background-color: #4CAF50;
          color: white;
          text-align: center;
          cursor: pointer;
        }

这里是 jsfiddle 链接http://jsfiddle.net/vpthcsx8/11/

【讨论】：

【解决方案3】：

.bottomFixButtionComponent{
  position: sticky;
  bottom: 0px;
  padding-top: 10px;
  background: yellowgreen;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -4px 3px rgb(27 27 24 / 75%);
  }

      
       <h1> Bottom Fix component </h1>
      
        <div class="bottomFixButtionComponent"> 
          <button>Clear </button>
          <div>|</div>
          <button>Submit </button>
         </div>

【讨论】：

【解决方案4】：

.bottomFixButtionComponent{
  position: fixed;
  bottom: 0px;
  padding-top: 10px;
  background: yellowgreen;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px -4px 3px rgb(27 27 24 / 75%);
  }

<h1> Bottom Fix component </h1>
      
        <div class="bottomFixButtionComponent"> 
          <button>Clear </button>
          <div>|</div>
          <button>Submit </button>
         </div>

【讨论】：