Question

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

我要在第二部分中添加绝对位置，因为我要使内容共享背景，一半是蓝色部分，而紫色部分。

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

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

.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>

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

1 个答案: