如何将 div 定位在 2 个其他 div 的交叉点上方？答案

【问题标题】：How to position divs above the intersection of 2 other divs?如何将 div 定位在 2 个其他 div 的交叉点上方？
【发布时间】：2019-01-23 13:35:30
【问题描述】：

如何将 div 定位在 2 个其他 div 的交点之上？我确实尝试过相对和绝对定位。但没能取得好的成绩。

我尝试过在 div1、div3 中使用相对和绝对位置，我将 div3 保留在 div1 中并增加了它的高度。但是在我将内容放入 div2 并尝试做类似的结构后，alinment 完全扭曲了。谁能帮我一些更好的方法？它可以通过 css 网格实现吗？

【问题讨论】：

您不需要 CSS 网格来实现这一点。但是，从您的问题中不清楚您的标记是如何构成的：您可以分享minimal, concrete, and verifiable example 吗？
jsfiddle.net/bu6Lyzp2/8
嗨@特里！感谢您的回复！这是一个描述： div1 和 div3 在页面的主容器内。 div1 构成页面的前 30%，而 div3- 其余 70%。并且 div 2 被放置在 div1 和 di3 相遇的位置的正上方。我希望这能说明一点！
这基本上就是您的屏幕截图所说明的内容，但没有给出任何结构指示。 div是如何嵌套的？ div1 和 div3 是兄弟姐妹吗？ div2 是嵌套在其中，还是它也是兄弟？

标签： html css css-grid

【解决方案1】：

使用此代码..它会帮助你....

.div1 {
  background-color: yellow;
  height: 100px;
  border: 1px solid #000;
  position: relative;
}
.div-2-half {
    background-color: #fff;
    height: 100px;
    border: 1px solid #000;
    width: 49%;
    float: left;
}
.div2 {
    width: 80%;
    margin: 0 auto;
    position: absolute;
    background: transparent;
    left: 0;
    right: 0;
    bottom: 41px;
}
.div3 {
  background-color: #fff;
    height: 100px;
    border: 1px solid #000;
}
.div4 {
    width: 100px;
    border: 1px solid #000;
    position: absolute;
    left: 23px;
}
.div-container {
  position: relative;
}

<div class="div1">
<p>div 1</p>

</div>
<div class="div-container">
  <div class="div2">
    <div class="div-2-half">
      <p>div 2</p>
      <div class="div4">div4</div>
    </div>
    <div class="div-2-half"><p>div 2</p></div>
  </div>
  <div class="div3"><p style="text-align:center; padding-top: 50px;">div 3</p></div>
</div>

【讨论】：