Question

我正在尝试为我的网站制作概念，我正在创建一个响应式菜单栏，一切正常，直到我在浏览器时元素开始相互重叠。

我不知道是否有可能停止与绝对定位的元素重叠，经过大量研究后我发现没什么用处，我也试过clear:both。

HTML：

<div class="maincontainer">
  <div id="block1" class="blocks">
  </div>
  <div id="block2" class="blocks">
  </div>
</div>

CSS：

.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;
}

我可以通过使用px尺寸代替%来解决重叠问题，但由于我的主要目标是制作一个完全响应的菜单，我试图在它们接近后停止它们的移动足以重叠。

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

注意：在这种情况下我只想要垂直对齐，并且我试图在特定情况下停止重叠，其中绿色块完全位于中心并且剩下红色块。

请检查Fiddle和Embedded result。

Answer 1

不要将边距与左右位置混合，而是使用其中一个作为问题目的。
如果指定高度和宽度，则只需要顶部或底部，左侧或右侧。
您需要使用媒体查询，因此当红色块与绿色重叠时，您将其left值更改为auto，将right更改为{{1} } auto，其中50px是绿色块宽度的一半。

JSFiddle

＆＃13;

calc(50% + 50px)

＆＃13;

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

＆＃13;

Answer 2

我建议不要使用绝对位置，因为没有它就可以轻松完成。

我已使用line-height垂直对齐子div，您可以进一步使用flex来垂直居中：How to vertically center divs?

遵循更新后的代码

＆＃13;

body {
  background-color: white;
}
.maincontainer {
  display: block;
  background-color: black;
  margin: 0 auto;
  width: 100%;
  height: 250px; 
  line-height:250px;
  text-align:center;
}

.blocks {
  display: inline-block;
  width: 100px;
  height: 50px;
}
#block1 {
  background-color: green;
}
#block2 {
  background-color: red;
}

＆＃13;

<div class="maincontainer">
  <div id="block1" class="blocks">
  </div>
  <div id="block2" class="blocks">
  </div>
</div>

＆＃13;

当浏览器缩放时，无法阻止绝对定位元素相互重叠

2 个答案: