如何在滚动时定位垂直固定和绝对水平的元素？

位置元素垂直固定，绝对水平

用户寻求一种解决方案，使按钮与 div 右边缘保持一定距离，无论视口大小如何，同时随窗口滚动。这可以使用以下策略来实现：

HTML 结构

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <div class="fixed"></div>
  </div>
</div>

CSS 样式

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}

div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

关键点

• 固定垂直位置： 位置：固定在 div 上。fixed 确保它随window.
• 绝对水平位置： 固定水平位置不是直接设置的。相反，它依赖于包装器 div（div.inflow 和可选的 div.positioner）来定义其相对于父 div 的位置。
• 动态调整：随着容器 div 大小的变化，按钮与右边缘保持所需的距离。
• 溢出处理：固定位置元素不受其容器div的溢出上下文，即使设置了overflow:hidden属性。

以上是如何在滚动时定位垂直固定和绝对水平的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！