如何实现元素的固定垂直和相对水平定位？

如何定位垂直固定但水平相对的元素

在这种情况下，我们需要一个距离容器右侧固定距离的按钮，无论视口大小。它还应该随窗口滚动，保持一致的垂直和水平偏移。要实现此目的：

1. 定义一个具有固定宽度、高度和右边距的容器 div (div.inflow)。
2. （可选）添加一个包装器 div (div.positioner)将固定元素水平放置在容器内。
3. 创建具有定义的宽度、高度和顶部的固定元素 (div.fixed) margin。
4. 设置位置：固定在固定元素上，将其锚定到视口。
5. 避免在固定元素上向左或向右设置。相反，利用容器和包装 div 来建立水平位置。

HTML:

  <div class="inflow">
    <div class="positioner">
      <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.positioner {
  position: absolute;
  right: 0;
}
div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

注意：如果容器宽度为不固定，需要包装器 div (div.positioner) 将固定元素推到容器的右侧。

重要：在容器上设置溢出：隐藏没有效果固定位置 div 超出其边界。固定位置有效地将其从容器的溢出上下文中删除。

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