Google Maps automatically sets Position:relative of #map div
<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>