如何修复HTML元素并在用户放大时强制滚动条

Question

当我放大到网页时，我的网站的div元素相互重叠。例如：如果放大StackOverflow，元素会保持原样，并放大到屏幕的中心/顶部。

我试过这些答案，但都没有说明如何在放大时将DIV、跨度等元素锁定到它们的确切位置，而不会相互重叠。

伙计们，我应该对我的css做什么更改？

Answer 1

有几种方法可以构建DOM来防止重叠，但如果元素是相对或静态的，并且不是大得离谱，浏览器通常会很好地保持内容的正确性。绝对位置是真正进入重叠元素的位置。

示例

Dom:

<div class='wrapper'>
  <div class='box box-1'>
  </div>
  <div class="box box-2">
  </div>
</div>

CSS：

.wrapper {
  position: relative;
  width: 100%;
}
.box {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
}
.box-1{
  background-color: red;
  left: 0
}
.box-2{
  right:0;
  background-color: blue;
}

在此查看CodePen。在本例中，有两个框位于屏幕的相对两侧，当空间耗尽（由于缩放或调整大小）时，这些框会重叠。若要防止这种情况发生，需要防止父元素（子元素的定位依据）塌陷。可以使用父元素上的min-width执行此操作。

请在此处使用CodePen上的min-width查看更新后的代码，缩放时会显示滚动条。