如何才能绝对水平定位元素并垂直固定？

将元素绝对水平且垂直固定

目标是创建一个与另一个元素的右边缘保持固定距离的按钮无论视口大小如何，同时垂直滚动window.

解决方案

要实现此目的，我们可以使用 CSS 定位属性的组合：

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

CSS:

.container {
  position: relative;
}

.button {
  position: absolute;
  right: 10px;  /* Distance from the right edge of the container */
  top: 100px;   /* Distance from the top of the viewport */
}

通过将 .button 的位置设置为绝对，我们使其独立于正常的文档流。 right 属性指定距容器右边缘的水平距离，而 top 定义距视口顶部的垂直距离。

注意： 此解决方案创建一个固定元素，即相对于其容器水平定位，满足题中“垂直固定，绝对水平”的条件。

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