How to put texts in svg waves-CodePudding

I'm tryn put some texts inside my wave from getwaves.io but the texts appear below the wave. I've taken a look at a blog which used these code but they do not work to me.

html
<div >
  <h1>Hello, world!</h1>
  <p>Check out my awesome waves!</p>
     <svg>the svg wave</svg>
    </div>

my css

html {
  box-sizing: border-box;
}

body {
  margin: 0;
}
.wave-container {
  background: #EEE;
}
.wave-container > svg {
  display: block;

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
.wave-container {
  position: relative;
  background: #09F;
  color: #FFF;
  text-align: center;
  overflow: hidden;
}
h1 {
  font-size: 5rem;
  margin: 7rem 1.25rem 2.5rem 1.25rem;
}
p {
  font-size: 1.5rem;
  margin: 0 1.25rem 5rem 1.25rem;
}
}

Can someone help please

CodePudding user response：

If you just want the text above the svg wave, what you can do is:

HTML:

<div >
  <div >
    <h1>Hello, world!</h1>
    <p>Check out my awesome waves!</p>
  </div>
  <svg>the svg wave</svg>
</div>

CSS:

.wave-container{
    position: relative;
}
.text-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Just try this, hope this will help ;-)