更改窗口宽度时，将元素推到屏幕外部

Question

我的方格div绝对位于屏幕的左侧。到达某个视口宽度后如何不断向左推？我唯一的想法是通过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

最后，如果你想要这个元素最终＆＃34;沉没＆＃34;在左边框，因此在窗口之外，我建议你使用css媒体和css calc function的组合。

希望这有任何帮助！