Posicionar header no meio do Google Maps

Boa noite, sou meio ruim com html e css, to apanhando bastante, mas estou com uma dúvida, queria um norte sobre,
Estou fazendo uma página com google maps utilizando a tela inteira e queria fazer uma espécie de menu suspenso sobre o mapa, quero colocar esse cabeçalho um pouco mais pra baixo, não quero deixar ele grudado no topo, queria que ele ficasse flutuando por cima do maps, isso é possível? Está correto usar o header ou uso um div mesmo?, até o momento tenho isso:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="home.css" />
</head>
<body>
 
  <header id="header">
    teste
</header>
 
 
   <div id="map">
 
 
    </div>
       <script>
         var map;
            function initMap() {
            map=new google.maps.Map(document.getElementById('map'), {
                center: {lat: 40.7413549, lng: -73.9980244},
                zoom:13
            });
         }
       </script>            
       <script async defer
               src="https://maps.googleapis.com/maps/api/js?key=minhaChaveAPI&v=3&callback=initMap">
       </script>

E o CSS:

body { 
    height: 100%; 
    margin: 0;
    padding: 0; 
}


#map {
    height: 100%; 
}


#header {
    background-color: cornflowerblue;        
    border-bottom-color: black;
    box-sizing: border-box;
    position: relative;
    
    max-width: 95%;
    height: 75px;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: 0px auto;
}