Text is hidden behind SVG-CodePudding

I added a h1 element after the SVG and it is not showing on the page. I thought that the SVG was maybe layered on top of the h1 element but I used z-index: -1; and the text is still not showing.

HTML:

<body>
  <svg viewBox="0 0 960 540"preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="960" height="540" fill="#1db954"></rect><path d="M0 462L22.8 461.7C45.7 461.3 91.3 460.7 137 457.8C182.7 455 228.3 450 274 444.3C319.7 438.7 365.3 432.3 411.2 439.7C457 447 503 468 548.8 467.7C594.7 467.3 640.3 445.7 686 442.7C731.7 439.7 777.3 455.3 823 458.5C868.7 461.7 914.3 452.3 937.2 447.7L960 443L960 541L937.2 541C914.3 541 868.7 541 823 541C777.3 541 731.7 541 686 541C640.3 541 594.7 541 548.8 541C503 541 457 541 411.2 541C365.3 541 319.7 541 274 541C228.3 541 182.7 541 137 541C91.3 541 45.7 541 22.8 541L0 541Z" fill="#191414" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
  <h1>a h1 element</h1>
</body>

CSS:

body {
  font-family: Lato, sans-serif;
  background-size: 100%;
  }
  svg {
    position: fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
  }

h1 {
  color: #fff;
  z-index: -1 !important;
}

What I am seeing: https://i.imgur.com/ukLCifM.png

CodePudding user response：

You should't use MINUS 1 as a z-index value, but a POSITIVE value for the h1! Or, actually better, z-index: -1 (= negative) for the SVG background image.