Как расположить div над пересечением 2 других div?

Question

Как расположить div над пересечением 2 других div?Я попробовал с относительным и абсолютным позиционированием.Но не смог добиться хорошего результата.

Я пробовал относительные и абсолютные позиции в div1, div3, и я держал div3 внутри div1и увеличил его высоту.Но после того, как я поместил содержимое в div2 и попытался создать похожую структуру, alinment полностью исказился.Может кто-нибудь, пожалуйста, помогите мне с лучшим подходом?Это может быть достигнуто сетками CSS?

Answer 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>