javascript - 在容器前放置横幅

Question

你好 ！

我已经收到了这个模型和这个容器的 HTML，我被要求设置它的样式。

但是我正在努力将那个蓝色横幅放在这个带有内容的容器后面，如果有人知道如何实现这一点，请帮助我，因为我的截止日期很近。

任何人都可以在这里帮助我吗？

  
.pj-container {
  background-color: grey;
  padding: 39px;
}

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

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

<div>
  <div>
    <div class="paragraph-block__block">
      <div class="block">
        <div class="block__content">
          <div class="mt-4 pj-container container">
             <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>

标签： javascripthtmljquerycsssass

Answer 1

.pj-container ::before为横幅创建一个伪元素。定义width、height、 background-color、top和left属性，z-index为-1；把它放在你的文本容器后面。

您可以将伪元素.pj-container::before 位置设为绝对位置并将其放置在top: 0和left: 0处。在您的顶部放置一个顶部边距pj-container，以进一步向下推到顶部折叠的顶部下方。

.pj-container::before  {
  content: '';
  width: 100%;
  height: 10rem;
  background-color: #02b4bd;
  position: absolute;
  top: .5rem;
  left: 0;
  z-index: -1;
}

.pj-container {
  background-color: grey;
  padding: 39px;
  margin-top: 5rem;
}

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

.pj {
  $pieces_justificatives: &;
  &--wrapper {
    #{$pieces_justificatives} {
      &__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;
      }
    }
  }
}

<div>
  <div>
    <div class="paragraph-block__block">
      <div class="block">
        <div class="block__content">
          <div class="mt-4 pj-container container">
             <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>