Как разместить этот баннер 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>