html - 用文本的高度插入下面的部分

Question

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

现在我想将第二个 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>

图像上方的第二个白色 div 带有 Lorem ipsum dolor sit amet,文本不会推送 <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>