css 固定按钮到页面顶部或者底部的实现方式

要实现按钮固定在页面顶部或底部，可以使用CSS的固定定位position: fixed属性。以下是实现这一功能的示例代码：

固定在页面顶部的按钮：




.button-top {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}




<button class="button-top">固定在顶部</button>

固定在页面底部的按钮：




.button-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}




<button class="button-bottom">固定在底部</button>

在这两个例子中，按钮被设置为固定位置，并通过left: 50%和transform: translateX(-50%)实现水平居中。top属性保证按钮固定在顶部，bottom属性保证按钮固定在底部。