Ma section div va sur le dessus de mon header div

Question

J'ai 3 sections principales sur le site que je pratique: Nav, Header et Section. Ma barre d'en-tête contient une image avec du texte au milieu, j'ai passé beaucoup de temps à essayer de faire en sorte que l'image accepte le texte par-dessus et ensuite qu'elle soit directement au centre (verticalement et horizontalement) de l'img.

J'ai trouvé quelque chose qui a fonctionné, mais après avoir trouvé cette solution, ma section a décidé d'aller aussi au-dessus de l'image, ce que je suis certain à cause du position: absolute; sur l'image.

L'aide dont j'ai besoin; comment puis-je faire passer la section sous l'en-tête, en gardant le texte au-dessus de l'image et au centre de celle-ci?

* { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: #f2f2f2; 
 
} 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#logo { 
 
    height: 50px; 
 
    width: auto; 
 
    float: left; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #1a1a1a; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
nav a { 
 
    display: inline-block; 
 
    padding: 16px 15px; 
 
    text-decoration: none; 
 
    font-family: "Open Sans", arial; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 
nav a:hover { 
 
    background-color: orange; 
 
    color: white; 
 
} 
 
nav { 
 
    margin-bottom: 0; 
 
} 
 
header { 
 
    margin-top: 0; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    display: table; 
 
    font-family: arial; 
 
    font-size: 18px; 
 
    color: orange; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
#bannerImage { 
 
    height: 500px; 
 
    width: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
section { 
 
    background-color: white; 
 
    font-family: arial; 
 
    width: 100%; 
 
    border: 1px solid #e7e7e7; 
 
    text-align: center; 
 
}

<nav> 
 

 
    <ul> 
 
    <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" /> 
 
    <li><a href="Game1.html" id="myBtn" onclick="disableLink()">Game 1</a> 
 
    </li> 
 
    <li><a href="">Game 2</a> 
 
    </li> 
 
    <li><a href="">Game 3</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<header> 
 
    <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" /> 
 
    <h1>Codewarts</h1> 
 
</header> 
 

 
<section> 
 
    <h2>Welcome!</h2> 
 
    <div id="content"> 
 
    <p>Do you have a name?.....Great!</p> 
 
    <p>Insert it in the box below!</p> 
 

 

 
    </div> 
 

 
</section>

Answer 1

Voulez-vous somenthing comme ça?

header { 
    position: relative; 
    } 
    header h1 { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%)}