我想创建一个保留在屏幕上的按钮，无论我们在页面上滚动多少，就像按钮卡在显示屏上一样。有没有办法做到这一点？
绝对
值指示元素是绝对定位的，而其他元素在网页上显示，就好像没有绝对定位的元素一样。元素的位置由左、上、右和下属性设置，父元素的位置属性也会影响位置。因此，如果位置的父值设置为静态或没有父值，则坐标将从浏览器窗口的边缘开始计数。如果父元素的位置值设置为固定、相对或绝对值，则坐标将从父元素的边缘开始计数。
固定
就其效果而言，此值接近绝对值，但与它不同的是，它与屏幕的左侧、顶部、右侧和底部属性中指示的点相关联，并且在滚动网页时不会更改其位置。如果元素的位置是固定的，并且它不完全适合浏览器窗口，则 Firefox 浏览器根本不显示滚动条。尽管 Opera 条显示滚动条，但它们不会影响元素的位置。
相对
元素的位置是相对于其原始位置设置的。添加左、上、右和下属性会更改元素的位置，并将其从原始位置沿一个方向或另一个方向移动。
静态的
项目照常显示。使用左侧、顶部、右侧和底部属性不会产生任何结果。
继承
继承父项的含义。
在您的情况下，"固定"应该可以工作
.HTML：
<div class="fix_block">Fixed block</div>
.CSS：
.fix_block {
position: fixed;
top: 100px;
left: 30px;
padding: 20px;
border: 1px solid #000;
}
在元素上使用position:fixed;。然后，您可以通过设置顶部、右侧、底部或左侧的某种组合来设置其位置。
您可以使用CSS position 属性来实现此目的，在这种情况下，您需要的属性是position:fixed;
使用此属性，您可以相对于浏览器的视口定位元素，即使滚动页面，该元素也将始终保持在同一位置。 所以简单地说，如果你有一个 html 元素，你想固定位置只是 在 CSS 中选择它并赋予它position:fixed;和相应的左、右、上、下值以对齐它。
.HTML
<div class="fixed_div">I am fixed!</div>
.CSS
.fixed_div {
position: fixed;
top: 40%;
left: 40%;
padding: 10px;
border: 2px solid red;
}
希望对您有所帮助！
使用 FIXED 位置 例如：当您有一个
<div class:"fixed-btn"> Fixed button </div>
你的 css 应该是这样的：
.fixed-btn{
position:fixed;
top:100px;
left:0px;
baground:#fff;
padding:5px;
}
试试吧..