如何垂直固定元素并将其绝对水平定位？

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

在Web开发中，经常需要以某种方式定位元素无论视口大小如何，它都保持一致。其中一种场景是垂直固定一个元素，同时与另一个元素保持特定的水平距离。

考虑以下挑战：您需要一个按钮来与容器 div 的右侧保持一致的距离。无论视口大小如何，按钮都应保持在视口内固定的垂直位置。

实现所需的定位

这可以通过利用位置：固定和位置：绝对的组合，如下所示code:

<div class="container">
  <div class="button"></div>
</div>

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

这种方法的关键在于没有显式设置 .button 元素的 left/right 属性。相反，容器 div 和附加 div (.positioner) 用于建立水平定位。

.button 元素从 .container div 继承其水平位置，而 .positioner div 推动 .button朝向容器 div 的右侧。在此示例中，.button 元素与容器 div 的右边缘保持 15px 的距离。

此外，.button 元素的固定垂直位置（顶部：60px）确保它保持在该垂直位置当页面滚动时在视口内。

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