如何将蓝色banner置于内容容器后方，现有CSS与HTML代码如何实现

可通过CSS定位+z-index层级控制实现蓝色banner放在内容容器后方的效果，无需大幅调整现有结构，以下是可直接复用的代码方案：

方案1：使用伪元素实现（无需修改HTML结构，推荐） #

调整后的SCSS代码 #

.pj-container {
  background-color: grey;
  padding: 39px;
  /* 新增：设置相对定位作为伪元素的定位基准 */
  position: relative;
  z-index: 1;
}

/* 新增：蓝色banner伪元素样式 */
.pj-container::before {
  content: "";
  position: absolute;
  /* 可根据设计稿调整以下位置、尺寸、颜色参数 */
  top: 20%;
  left: -5%;
  width: 110%;
  height: 60%;
  background-color: #165DFF; /* 替换为设计稿对应的蓝色色值 */
  z-index: -1; /* 层级设为-1，自动放在容器内容后方 */
  border-radius: 8px; /* 按需调整圆角大小 */
}

.container {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

/* 原有SCSS代码保持不变 */
.pj {
  $p_j: &;
  &--wrapper {
    #{$p_j} {
      &__title {
        margin: 0;
        font-size: 24px;
      }
      &__card {
        box-sizing: border-box;
        border: 1px solid #d6d7dc;
        border-radius: 6px;
        background-color: rgba(241, 242, 246, 0.22);
        padding: 18px 24px 20px !important;
      }
      &__list {
        li {
          font-weight: bold;
          counter-increment: mylistcounter;
        }
        li::before {
          background-color: #fddf36;
        }

        span::before {
          display: inline-block;
          content: counter(mylistcounter) " . ";
          margin-right: 5px;
        }
      }
      &__amount {
        color: #02afbc !important;
        font-family: Roboto;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 32px;
        margin-left: 0 !important;
      }
    }
  }
}

方案2：额外添加DOM元素实现（适合需要对banner做动态交互的场景） #

调整后的HTML代码（在.pj-container内部最前面新增banner节点） #

<div>
  <div>
    <div class="paragraph-block__block">
      <div class="block">
        <div class="block__content">
          <div class="mt-4 pj-container container">
             <!-- 新增蓝色banner节点 -->
             <div class="pj-banner"></div>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor morbi non arcu risus quis varius quam. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Cursus sit amet dictum sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Pharetra pharetra massa massa ultricies mi quis. Nulla pharetra diam sit amet. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Lacus sed turpis tincidunt id aliquet risus feugiat. Dolor morbi non arcu risus. Ac ut consequat semper viverra nam libero justo laoreet sit. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Viverra orci sagittis eu volutpat odio facilisis. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Lacus luctus accumsan tortor posuere.

Aenean pharetra magna ac placerat vestibulum. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Quis varius quam quisque id diam vel. Fusce ut placerat orci nulla pellentesque. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Ac placerat vestibulum lectus mauris ultrices eros. Nulla facilisi morbi tempus iaculis urna id. Amet nisl purus in mollis nunc sed id semper risus. Mattis aliquam faucibus purus in massa tempor nec feugiat. Morbi leo urna molestie at elementum. Faucibus a pellentesque sit amet porttitor. Ornare suspendisse sed nisi lacus sed viverra. Eget gravida cum sociis natoque penatibus et magnis dis. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Enim ut tellus elementum sagittis vitae et leo duis ut. Ut tellus elementum sagittis vitae et leo. Nascetur ridiculus mus mauris vitae. Tincidunt id aliquet risus feugiat in. Malesuada pellentesque elit eget gravida cum sociis natoque.</p>
          </div>
        </div>
      </div>          
    </div>
  </div>
</div>

新增对应CSS样式 #

.pj-container {
  background-color: grey;
  padding: 39px;
  position: relative;
  z-index: 1;
}
.pj-banner {
  position: absolute;
  top: 20%;
  left: -5%;
  width: 110%;
  height: 60%;
  background-color: #165DFF;
  z-index: -1;
  border-radius: 8px;
}

注意事项 #

• 可自行调整伪元素或.pj-banner的top、left、width、height数值，匹配设计稿的banner位置和尺寸
• 如果上层节点设置了overflow: hidden，会导致超出容器的banner部分被裁剪，排查后去掉对应属性即可

内容的提问来源于stack exchange，提问作者agoumi