如何实现元素的固定垂直和相对水平定位？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-12-16 20:38:10

原创

456 人浏览过

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

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

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

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

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

登录后复制

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中文网其他相关文章！