SVG: как расположить текст поверх SVG?

Question

Я хочу разместить FAQ, чтобы быть на вершине серой волны SVG. Например, «Часто задаваемые вопросы» будут в верхней части SVG, а другой текст будет находиться прямо под ним (например, если вокруг вопроса о FAQ есть поле, я просто хочу сдвинуть его вверх). Есть ли способ сделать это?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
        <!--FAQ accordian-->
        <section>
          <div class="container faq">
            <h2 class="header-h2">Frequently Asked Questions</h2>
            <div class="row">
              <div class="col">
                <div class="faq-question">
                  <h5>How much does it cost?</h5>
                  <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>                 
                </div>
                <div class="faq-question">
                  <h5>What will you do with Lorem?</h5>
                </div>
              </div>
              <div class="col">
                <div class="faq-question">
                  <h5>What is the difference between the free and premium plans?</h5>
                  <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>
              </div>
            </div>
          </div>
        </section>

В настоящее время:

Answer 1

Вы можете присвоить классу svg и расположить его абсолютно сверху с z-индексом -1, а затем соответственно разместить пробел в header-h2.

.hero {
  position: absolute;
  top: 0;
  z-index: -1;
}

.header-h2 {
  margin: 80px 0;
}

<svg class="hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
  <div class="container faq">
    <h2 class="header-h2">Frequently Asked Questions</h2>
    <div class="row">
      <div class="col">
        <div class="faq-question">
          <h5>How much does it cost?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
        </div>
        <div class="faq-question">
          <h5>What will you do with Lorem?</h5>
        </div>
      </div>
      <div class="col">
        <div class="faq-question">
          <h5>What is the difference between the free and premium plans?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

Вы можете либо установить позицию для svg (абсолютная / фиксированная) и дать ей z-index:-1, ИЛИ установить позицию для .faq и присвоить ей top:1

Answer 3

* {
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 240px;
  width: 100%;
  z-index: -1;
}

.header-h2 {
  font-family: sans-serif;
  font-size: 3vw;
  padding: 1.5%;
}

.row {
  display: flex;
  justify-content: space-around;
  padding-top: 120px
}

.col {
  max-width: 500px;
  padding: 3%;
}

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1"   d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
  <div class="container faq">
    <h2 class="header-h2">Frequently Asked Questions</h2>
    <div class="row">
      <div class="col">
        <div class="faq-question">
          <h5>How much does it cost?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
        </div>
        <div class="faq-question">
          <h5>What will you do with Lorem?</h5>
        </div>
      </div>
      <div class="col">
        <div class="faq-question">
          <h5>What is the difference between the free and premium plans?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
</section>