我想将常见问题解答放在此灰波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>
答案 0 :(得分:1)
您可以为svg
(绝对/固定)设置一个职位,并给它一个z-index:-1
,也可以为.faq
设置一个职位,并给它一个{{1} }
答案 1 :(得分:1)
您可以给svg
一个类,并以-1的z-index绝对将其放在顶部,然后相应地分隔标题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>
答案 2 :(得分:0)
* {
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>