css - 当用户放大时，如何修复 HTML 元素并强制滚动条？

Question

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

我试过了 these答案，但它们都没有说明我可以将 DIV、span 等元素锁定到它们的确切位置而不会在我放大时相互重叠的方式。

伙计们，我应该对我的 CSS 做哪些更改？

Answer 1

可以通过多种方式构建 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;
}

View On CodePen here.在此示例中，有两个框位于屏幕的相对两侧，当空间用完(由于缩放或调整大小)时，框会重叠。为防止这种情况，您需要防止父元素(子元素所在的位置)折叠。您可以在父元素上使用 min-width 来做到这一点。

参见 updated code with a min-width on CodePen here当缩放时，您会看到滚动条出现。