html - 如何在页面右下角添加固定按钮

Question

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

HTML

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

CSS

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

Answer 1

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

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

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

这是由JoshC提供的jsFiddle。

Answer 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/

Answer 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>

Answer 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>