'Z-INDEX Issue, and does order of the code matter in html [duplicate]

Excuse me for my newbie question as I just recently started web developing.

So I was building a website, and then I put my <image.svg> code directly below <body> nested in a <div>, but it pushes my element down. I tried using <position> and <z-index> but it didn't work. I tried to find other guides for this specific problem but there are none available as of this moment.

Here is the code:

<body>
<div id="background">(LONG SVG CODE)</div>
<header>
        <div>
              <div id="logo">Logo</div>
              <p>Text</p>
        </div>
</header>
<div class="navbar" id="navbar">
        <ul>
             <li>Text</li>
             <li>Text</li>
        </ul>
</div>
    <div class="item">
             <h1>Text</h1>
             <p>Text.</p>
    </div>
</body>

Here is my CSS code:

#background {
    position: center center fixed;
    z-index: 1;
}

header {
    position: relative;
    z-index: 2;
}

#navbar {
    z-index: 3;
    position: relative;
}

.item {
     z-index: 4;
     position: relative;
}
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions