CODEWITHSUNDEEP
htmlcsssvg
Alice
Alice

Reputation: 57

SVG: how to position text on top of svg?

I want to place the FAQ to be on top of this gray wave SVG. As in, the "Frequently Asked Questions" Would be on top of the SVG and the other text would be right below it still (like if there was a box around the FAQ question, I just want to shift it up). Is there a way to do that?

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

Currently: enter image description here

Upvotes: 1

Views: 6287

Answers (3)

h3t1
h3t1

Reputation: 1226

* {
  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>

Upvotes: 0

strawberrymilk
strawberrymilk

Reputation: 392

You can either set a position for the svg (absolute/fixed) and give it a z-index:-1, OR set a position for your .faq and give it a top:1

Upvotes: 1

Tad Wohlrapp
Tad Wohlrapp

Reputation: 1897

You could give the svg a class and position it absolutely on top with a z-index of -1, and then space your header-h2 accordingly.

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

Upvotes: 2

Related Questions