Html Can'；当浏览器缩放时，不能停止绝对定位元素相互重叠

我试图为我的网站设计一个概念，我创建了一个响应迅速的菜单栏，一切都很好，直到我缩放浏览器时，元素开始相互重叠

我不知道是否有可能停止与绝对定位元素的重叠，在进行了大量研究之后，我没有发现任何有用的东西，我尝试了

clear：两者都是


HTML:

我本可以通过使用
px
维度而不是
%
来停止重叠问题，但由于我的主要目标是制作一个完全响应的菜单，因此我尝试在它们足够接近重叠时停止它们的移动


阻止这种重叠的最佳方法是什么？这可以通过绝对定位的元素来实现吗？如果没有，那么更好的方法是什么

注意：在这种情况下，我只希望垂直对齐，在特定情况下，我试图停止重叠，其中绿色块完全位于中心，红色块位于左侧

请检查并确认。

不要将边距与左右位置混在一起，而要将其中一个用于提问
如果指定高度和宽度，则只需要顶部或底部以及左侧或右侧
您需要使用媒体查询，因此当红色块与绿色块重叠时，您可以将其
左
值更改为
自动
，将其
右
值从
自动
更改为
计算（50%+50px）
，其中50px是绿色块宽度的一半



.main容器{
显示：块；
背景色：黑色；
保证金：0自动；
宽度：100%；
最小宽度：600px；
高度：250px；
}
身体{
背景色：白色；
}
.街区{
位置：绝对位置；
显示：内联块；
宽度：100px；
高度：50px；
}
#区块1{
背景颜色：绿色；
顶部：100px；
左：计算（50%-50px）；
}
#区块2{
背景色：红色；
顶部：100px；
左：25%；
}
@介质（最大宽度：600px）{
#区块2{
左：自动；
右：计算（50%+50px）；
}
}
我建议不要使用绝对位置，因为没有绝对位置很容易做到

我已经使用了
线高度
来垂直对齐子div，您可以进一步使用flex来垂直居中，如下所示：

遵循更新的代码


正文{
背景色：白色；
}
.主集装箱{
显示：块；
背景色：黑色；
保证金：0自动；
宽度：100%；
高度：250px；
线高：250px；
文本对齐：居中；
}
.街区{
显示：内联块；
宽度：100px；
高度：50px；
}
#区块1{
背景颜色：绿色；
}
#区块2{
背景色：红色；
}

谢谢！这段代码几乎解决了我的问题，但是如果我需要div块在中间呢？另外，当它们接近特定像素时，我能阻止它们两个靠近吗？再次感谢。@ShellRox不客气：）哪个街区应该在中心？你能详细说明第二个问题吗？绿色的方块应该在中间，红色的方块在左边。在这种情况下，使用绝对定位元素是否可以停止重叠？好的，我现在明白了。您需要使用媒体查询，让我编辑答案。@ShellRox当然！您必须更改媒体查询最大宽度和正确的值，我留下了一个30px的间隙，所以它更明显。720px的值不正确，因为它是手工做的（测试），但你可以做精确的数学：）非常感谢，但如果我只需要绿色div在中间，其他在左边呢？此外，我想水平对齐只。再次感谢。我已经张贴了上面的链接，回答垂直对齐div
<div class="maincontainer">
  <div id="block1" class="blocks">
  </div>
  <div id="block2" class="blocks">
  </div>
</div>

.maincontainer {
  display: block;
  background-color: black;
  margin: 0 auto;
  width: 100%;
  min-width: 600px;
  height: 250px;
}
body {
  background-color: white;
}
.blocks {
  background-color: red;
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 50px;
}
#block1 {
  background-color: green;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
#block2 {
  top: 100px;
  left: 0;
  right: 25%;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}