Question

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

HTML

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

CSS

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

Answer 1

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

将您的CSS更改为以下内容，这将选择id fixedbutton

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

这是jsFiddle JoshC的{{3}}礼貌。

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>

如何在页面右下方添加固定按钮

4 个答案: