如何垂直固定和水平绝对定位元素

问题：

用户寻求创建一个按钮，与视口保持固定的垂直距离，同时与 div 的右边缘保持特定距离，无论视口如何size.

解决方案：

水平定位：

虽然“绝对水平”定位在技术上无法通过所提供的实现解决方案，就可以达到与div右边缘保持固定距离的目的。通过避免为水平固定元素设置 left 或 right 属性，容器 div 用于控制其水平位置。

垂直定位：

元素被定位使用position:fixed属性垂直固定。通过设置顶部值，无论视口大小如何，都会保持垂直定位。

代码示例：

以下代码演示了实现：

HTML:

CSS:

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;}
div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

关键注意事项：

• 如果 div.inflow div 具有固定宽度，则可能不需要 div.positioner div，允许直接设置固定元素的左边距。
• 设置溢出：隐藏在容器div上不会影响固定元素在其外部的定位边界。