javascript - 更改窗口宽度时将元素推到屏幕外

Question

我将正方形 div 绝对定位在屏幕的左侧。达到某个视口(viewport)宽度后，如何不断将其向左推？我唯一的想法是通过 javascript 添加 resize 事件监听器并计算元素的 left 属性为负数。

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vh;
  background-color: lightblue;
}

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

Answer 1

我不确定我是否理解您的问题。如果您只是想让一个元素粘在左边，那么您的代码就完全没问题。

如果您的目标是使其仅适用于特定的屏幕宽度，那么我建议您查看 css media

最后，如果您希望此元素最终“下沉”在左边框中，因此在窗口之外，我建议您结合使用 css 媒体和 css calc function .

希望对您有所帮助!