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

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

这是JoshF提供的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/