如何在不创建间距的情况下将此 CTA 横幅放置在其他两个 div 之上？

Question

基本上我想实现一个横幅 CTA 块，它总是会遍历前一个和下一个 DIV，而不是创建一个白色的空白间距。无论实际 CTA 横幅块的高度如何，我都想以流畅的方式实现这一点。

代码示例：https://codepen.io/Gugols/pen/pORwxB

.before-banner {
  background: pink;
  margin-bottom: -90px;
  min-height: 100px;
  padding-bottom: 90px;
}

.after-banner {
  
  background: orange;
  min-height: 100px;
  padding-top: 90px;
}
.cta-wrapper {
  /*min-height: 150px;*/

  margin-bottom: -90px;
}
.cta {
  width: 50%;
  background: green;
  opacity: 0.7;
  font-size: 28px;
  margin: 0 auto;
}

<div class="before-banner paragraph">
  In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.  In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
    In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
</div>
<div class="cta-wrapper">
  <div class="cta">
    <p>This is a CTA banner. Praesent egestas neque eu enim. Ut id nisl quis enim dignissim sagittis. Praesent vestibulum dapibus nibh. Etiam sit amet orci eget eros faucibus tincidunt. Vestibulum ante 
    </p>
  </div>
</div>
<div class="after-banner paragraph">
  In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce a quam. Vivamus elementum semper nisi. Cras non dolor.
</div>

一些插图：

建议的 CSS 解决方案路径是理想的，但也可以接受基于 JavaScript（也包括 jQuery）的解决方案。 谢谢。

Answer 1

实现重叠元素（不创建空白）的基本方法是将其position 设置为absolute。要使其与上面元素中的文本一起流动，请使该元素包含与position: relative 重叠的元素。

.text-block {
  position: relative;
  width: 50%;
  border: 1px solid red;
  padding: 50px;
}

.cta {
  position: absolute;
  border: 1px solid blue;
  width: 50%;
  left: 25%;
}

<div class="text-block">
  <p>basically I want to implement a banner CTA block which would always go over the previous and next DIVs but not create a white, empty spacing. I want to implement this in fluid way, irrespective of the height of the actual CTA banner block.</p>
  <div class="cta">basically I want to implement a banner CTA block which would always go over the previous and next DIVs but not create a white, empty spacing. I want to implement this in fluid way, irrespective of the height of the actual CTA banner block.</div>
</div>