CSS button固定

在网页设计中，按钮是非常常见的元素之一。我们经常需要在网页中添加按钮来进行交互操作，如提交表单、跳转页面等。在设计按钮样式时，有时候我们希望按钮能够固定在页面的某个位置，不随着页面滚动而移动。本文将介绍如何使用CSS实现固定按钮的效果。

使用position属性实现按钮固定

在CSS中，position属性用来设置元素的定位方式。通过设置position属性为fixed，可以让元素相对于浏览器窗口固定位置。下面是一个简单的示例代码，演示如何使用position属性实现按钮固定在页面底部右侧：

.btn-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

<button class="btn-fixed">固定按钮</button>

在上面的代码中，我们定义了一个类名为btn-fixed的按钮样式，通过设置position为fixed，bottom和right属性为20px，可以让按钮固定在页面底部右侧。此外，我们还设置了按钮的背景颜色、文字颜色、边框圆角等样式。

滚动时按钮固定

有时候我们希望按钮在页面滚动时也能保持固定在某个位置，这时可以通过结合JavaScript来实现。下面是一个示例代码，实现了页面滚动时按钮固定在页面顶部：

.btn-fixed {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

window.onscroll = function() {myFunction()};

var header = document.getElementsByClassName("btn-fixed")[0];
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.style.position = "fixed";
    header.style.top = "0";
  } else {
    header.style.position = "absolute";
    header.style.top = "20px";
  }
}

<button class="btn-fixed">固定按钮</button>

在上面的代码中，我们首先定义了一个类名为btn-fixed的按钮样式，通过设置position为absolute，top和right属性为20px，让按钮在页面顶部右侧。然后通过JavaScript监听页面的滚动事件，当页面滚动到按钮的位置时，将按钮的固定位置设置为fixed，从而实现了按钮在页面滚动时的固定效果。