title: Google Maps automatically sets Position:relative of #map div
body: <p>I have a strange problem or at least to me its kinda strange. When i style my #map div and set the position:fixed (since i need it as a background) it automatically sets the position to relative and overrides my settings. I couldnt figure out where to change this behavior. </p>
  
  <p>The parent class:</p>
  
  <pre><code>.wrapper {
    margin: 0;
    padding: 0;
    height: 100vh;
    z-index: 1;
    display: flex;
  }
  </code></pre>
  
  <p>and the #map    </p>
  
  <pre><code> #map {
        height: 100%;
        width: 100vw;
        overflow: hidden;
        z-index: 0;
        top: 0;
        left: 0;
        position: fixed;
  </code></pre>
  
  <p>code is simple:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
         &lt;div id="map"&gt;&lt;/div&gt;
          &lt;div class="entries container"&gt;
              {% with 940 as width %}{% placeholder content %}{% endwith %}
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now when i enter the page it first renders nicely and after a milisec the apply of the js i assume the #map div got these lines added</p>
  
  <pre><code>element.style {
      position: relative;
      overflow: hidden;
  }
  </code></pre>
  
  <p>well if i change it manually it does exactly what i want it to but i cant disable this override. Has anyone else expierienced something like this? Im kinda stuck.</p>
  
  <p>Im usign Chrome.</p>
  
  <p>Thanks in advance for your time!
  Regards</p>
  
  <p>JS file: </p>
  
  <pre><code>var map; 
  function initialize() {
      var v = {lat: 4.00, lng: 7.00};
  
      var marker = new google.maps.Marker({
          position: v,
          map: map,
          title: 'V!'
      });
  
      var styleArray = [
          {
              "featureType": "all",
              "elementType": "all",
              "stylers": [
                  {
                      "hue": "#ff0000"
                  },
                  {
                      "saturation": -100
                  },
                  {
                      "lightness": -30
                  }
              ]
          },
          {
              "featureType": "all",
              "elementType": "labels.text.fill",
              "stylers": [
                  {
                      "color": "#ffffff"
                  }
              ]
          },
          {
              "featureType": "all",
              "elementType": "labels.text.stroke",
              "stylers": [
                  {
                      "color": "#353535"
                  }
              ]
          },
          {
              "featureType": "landscape",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#656565"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "geometry.fill",
              "stylers": [
                  {
                      "color": "#505050"
                  }
              ]
          },
          {
              "featureType": "poi",
              "elementType": "geometry.stroke",
              "stylers": [
                  {
                      "color": "#808080"
                  }
              ]
          },
          {
              "featureType": "road",
              "elementType": "geometry",
              "stylers": [
                  {
                      "color": "#454545"
                  }
              ]
          }
      ];
      var mapOptions = {
          center: new google.maps.LatLng(47.295065, 7.937821),
          zoom: 14,
          zoomControl: true,
          zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL,
          },
          disableDoubleClickZoom: false,
          mapTypeControl: false,
          scaleControl: false,
          scrollwheel: false,
          panControl: false,
          streetViewControl: false,
          draggable: false,
          overviewMapControl: false,
          overviewMapControlOptions: {
              opened: false,
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: styleArray
      };
      map = new google.maps.Map(document.getElementById("map"),
          mapOptions);
  
      var locations = [
          ['V', 'undefined', 'undefined', 'undefined', 'undefined', 4.0, 7.0, 'https://mapbuildr.com/assets/img/markers/hollow-pin-red.png']
      ];
      for (i = 0; i &lt; locations.length; i++) {
          if (locations[i][1] == 'undefined') {
              description = '';
          } else {
              description = locations[i][1];
          }
          if (locations[i][2] == 'undefined') {
              telephone = '';
          } else {
              telephone = locations[i][2];
          }
          if (locations[i][3] == 'undefined') {
              email = '';
          } else {
              email = locations[i][3];
          }
          if (locations[i][4] == 'undefined') {
              web = '';
          } else {
              web = locations[i][4];
          }
          if (locations[i][7] == 'undefined') {
              markericon = '';
          } else {
              markericon = locations[i][7];
          }
          marker = new google.maps.Marker({
              icon: markericon,
              position: new google.maps.LatLng(locations[i][5], locations[i][6]),
              map: map,
              title: locations[i][0],
              desc: description,
              tel: telephone,
              email: email,
              web: web
          });
          link = '';
      }
  
      map.panBy(0, 200);
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  google.maps.event.addDomListener(window, "resize", function () {
      var center = map.getCenter();
      google.maps.event.trigger(map, "resize");
      map.setCenter(center);
  
  });
  </code></pre>