用文字的高度推动下面的部分

Question

我有带图像的轮播。在图像上方，我在文本上放置了一个格。

现在，我想将第二个div放置在第一个div旁边，但要低一点，然后将波纹管部分向下推并显示文本。

正在发生的事情是，仅当文本在转盘上方时，带有文本的第二个div才可见。文本在波纹管中延伸后，将隐藏在波纹管部分的后面。

这是我到目前为止的演示

.mask-what-we-do {
  width: 444px;
  height: 340px;
  background-color: #1b1a1a;
  position: absolute;
  top: 0;
  left: 50px;
}

.mask-follow-text {
  width: 633px;
  height: 340px;
  background-color: #fff;
  position: absolute;
  top: 81px;
  left: 500px;
}

.carousel-inner {
  height: 340px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="head-image" class="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://s3-eu-west-1.amazonaws.com/madgexdotcom-assets/transforms/pageheaders/2490/header-careers-2_73f47f2168e54879fea667b73c67519e.jpg" alt="Image">
      <div class="mask-what-we-do">
        <hr style="width: 375px;margin-top: 50px;border-top: 1px solid #fff;">
        <p style="height: 24px;color: #ffffff;padding:35px; font-weight: 900;margin-top: -35px;font-size: 24px;"><i>Lorem Ipsum</i></p>
      </div>
      <div class="mask-follow-text">
        <p style="height: 24px;color: #ffffff;padding:35px;margin-top: -35px;font-size: 24px;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>
        <p style="height: 24px;color: #000;padding:35px;margin-top: -35px;font-size: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>

        <p style="height: 24px;color: #000;padding:35px; margin-top: -35px;font-size: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>

        <p style="height: 24px;color: #000;padding:35px;margin-top: -35px;font-size: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>

        <p style="height: 24px;color: #000;padding:35px;margin-top: -35px;font-size: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>

        <p style="height: 24px;color: #000;padding:35px;margin-top: -35px;font-size: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>
      </div>
    </div>
  </div>

  <section class="team">
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="col-lg-12">
            <h2 class="partners-title" style="text-align:center;">Lorem</h2>

          </div>
        </div>
      </div>
    </div>
  </section>

带有Lorem ipsum dolor sit amet,文字的图像上方的第二个白色div不会推动<section>波纹管，因此​​它不可见。

这里也是JSfiddle demo。

更新：添加需要的图像

Answer 1

您能尝试一下吗？

.mask-what-we-do {
  background-color: #1b1a1a;
  z-index: 1;
  margin-left: 50px;
  grid-column: 1/2;
  grid-row: 1/3;
}

.mask-follow-text {
  width: 633px;
  background-color: #dedede;
  z-index: 1;
  margin-left: 5px;
  padding: 20px;
  grid-column: 2/3;
  grid-row: 2/-1;
}

.item-wrap {
  display: grid;
  position: relative;
  grid-template-columns: 200px auto 1fr;
  grid-template-rows: 100px 100px auto;
}

.item-wrap img {
  top: 0;
  left: 0;
  grid-column: 1/ -1;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
}

.team {
  background-color: #a9a9a9;
}

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="head-image" class="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="item-wrap">
        <img src="https://s3-eu-west-1.amazonaws.com/madgexdotcom-assets/transforms/pageheaders/2490/header-careers-2_73f47f2168e54879fea667b73c67519e.jpg" alt="Image">
        <div class="mask-what-we-do">
          <hr style="margin-top: 50px;border-top: 1px solid #fff;">
          <p style="height: 24px;color: #ffffff;padding:35px; font-weight: 900;margin-top: -35px;font-size: 24px;"><i>Lorem Ipsum</i></p>
        </div>
        <div class="mask-follow-text">
          <p style="padding:3px;font-size: 24px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>
          <p style="padding:3px;font-size: 24px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>
          <p style="padding:3px;font-size: 24px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>
          <p style="padding:3px;font-size: 24px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu ante, elementum. </p>

        </div>
      </div>
    </div>
  </div>

  <section class="team">
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="col-lg-12">
            <h2 class="partners-title" style="text-align:center;">Lorem</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

            </p>

          </div>
        </div>
      </div>
    </div>
  </section>