html - 绝对位置使其他内容元素不灵活

Question

我有两个内容，第一个是蓝色部分，第二个是紫色部分。

我在第二部分添加了绝对位置，因为我想制作内容共享背景，一半是蓝色部分，一半是紫色部分。

我的问题是，如果我在第一部分添加更多文本，第一部分的文本会隐藏在第二部分后面。

有没有办法让第一部分变得灵活？因此，每当我添加更多文本时，第二部分都不会隐藏文本。

.commercial-wrapper {
  display: flex;
  position: relative;
  bottom: 320px;
}

.commercial-white {
  background-color: #f1f1f4;
  width: 340px;
  height: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 15px solid #005da0;
  margin: 10px;
}

.commercial-blue {
  position: absolute;
  background-color: #005da0;
  color: #ffffff;
  width: 340px;
  height: 473px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border: 2px solid #ffffff;
  visibility: hidden;
}

.open.commercial-blue {
  visibility: visible;
}

.commercial-flip {
  padding: 20px;
  pointer-events: none;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  background-color: purple;
  justify-content: center;
}

.commercial-wrapper-text {
  text-align: center;
  background-color: #215cad;
  color: #ffffff;
  padding: 20px 0;
  height: 500px;
}

.commercial-main-wrapper-flip {
  background-color: purple;
  position: relative;
  height: 200px;
}

.commercial-wrapper-flip {
  display: flex;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
}

#industry-block {
  background-color: #dce5ee;
}

.commit-industry {
  border: 1px solid purple;
  text-align: center;
  position: relative;
}

 <div class="commercial-solution-wrapper">
        <div class="commercial-wrapper-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
                <br />

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
                <br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

    <div class="commercial-main-wrapper-flip">
        <div class="commercial-wrapper-flip">

            <div class="commercial-wrapper">
                <div class="commercial-white">
                    <div class="commercial-flip">
                        <h3>Lorem ipsum</h3>
                    </div>
                </div>

            </div>

            <div class="commercial-wrapper">
                <div class="commercial-white">
                    <div class="commercial-flip">
                        <h3>Lorem ipsum</h3>
                    </div>
                </div>

            </div>

            <div class="commercial-wrapper">
                <div class="commercial-white">
                    <div class="commercial-flip">
                        <h3>Lorem ipsum</h3>
                    </div>
                </div>

            </div>

            <div class="commercial-wrapper">
                <div class="commercial-white">
                    <div class="commercial-flip">
                        <h3>Lorem ipsum</h3>
                    </div>
                </div>

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

编辑:为预期结果添加图像

Answer 1

因为您要添加 position: absolute，所以您将该元素从文档流中取出 - 因此文本永远不会与下面的内容交互(因此隐藏)。

一种方法是向第二个包装器添加线性渐变。所以你基本上是在“伪造”重叠。

重要部分:

.commercial-main-wrapper-flip {
  background: linear-gradient(0deg, rgba(191, 0, 254, 1) 55%, rgba(33, 92, 173, 1) 55%);
  position: relative;
}

.commercial-wrapper {
  display: flex;
  position: relative;
}

.commercial-white {
  background-color: #f1f1f4;
  width: 340px;
  height: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 15px solid #005da0;
  margin: 10px;
}

.commercial-blue {
  position: relative;
  background-color: #005da0;
  color: #ffffff;
  width: 340px;
  height: 473px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border: 2px solid #ffffff;
  visibility: hidden;
}

.open.commercial-blue {
  visibility: visible;
}

.commercial-flip {
  padding: 20px;
  pointer-events: none;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  background-color: purple;
  justify-content: center;
}

.commercial-wrapper-text {
  text-align: center;
  background-color: #215cad;
  color: #ffffff;
  padding: 20px 0;
}

.commercial-main-wrapper-flip {
  background: linear-gradient(0deg, rgba(191, 0, 254, 1) 55%, rgba(33, 92, 173, 1) 55%);
  position: relative;
}

.commercial-wrapper-flip {
  display: flex;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
}

<div class="commercial-solution-wrapper">
  <div class="commercial-wrapper-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
      <br />

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
        <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
        <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div class="commercial-main-wrapper-flip">
  <div class="commercial-wrapper-flip">

    <div class="commercial-wrapper">
      <div class="commercial-white">
        <div class="commercial-flip">
          <h3>Lorem ipsum</h3>
        </div>
      </div>

    </div>

    <div class="commercial-wrapper">
      <div class="commercial-white">
        <div class="commercial-flip">
          <h3>Lorem ipsum</h3>
        </div>
      </div>

    </div>

    <div class="commercial-wrapper">
      <div class="commercial-white">
        <div class="commercial-flip">
          <h3>Lorem ipsum</h3>
        </div>
      </div>

    </div>

    <div class="commercial-wrapper">
      <div class="commercial-white">
        <div class="commercial-flip">
          <h3>Lorem ipsum</h3>
        </div>
      </div>

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