具有绝对Div叠加的响应DIV行+列布局

Question

我正在尝试实现附加的布局for screenshot click here

让它响应，以便DIV B在调整大小屏幕上降至DIV A以下

我绝对定位DIV B，以便它涵盖内容和DIV C

DIV C必须是全宽度，DIV A也是如此。

任何帮助将不胜感激我可以使用桌面实现布局，但没有响应

Answer 1

你可以在这里看到它https://jsfiddle.net/DeeptiC/83ox7yLf/4/

更改屏幕尺寸以查看响应性

.div-a {
  width: 100%;
  text-align: center;
  padding: 20px;
  background: green;
}
.div-bwrapper {
  max-width: 1170px;
  position: relative;
  z-index: 1;
}
.div-b {
  width: 200px;
  height: 350px;
  background: blue;
  position: absolute;
  top: -60px;
  right: 0px;
}
.div-c {
  width: 100%;
  text-align: center;
  padding: 20px;
  background: Yellow;
}
.inner-wrap {
  max-width: 1170px;
}
@media (max-width: 768px) {
  .div-bwrapper {
    width: 100%
  }
  .div-b {
    width: 100%;
    text-align: center;
    padding: 20px;
    height: auto;
    position: relative;
    top: 0px;
    right: 0px;
  }
}

<div class="div-a">
  <div class="inner-wrap">
    DIV A
  </div>
</div>
<div class="div-bwrapper">
  <div class="div-b">
    <div class="inner-wrap">
      DIV B
    </div>
  </div>
</div>
<div class="div-c">
  <div class="inner-wrap">
    DIV c
  </div>
</div>