Google Maps automatically sets Position:relative of #map div

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. The parent class: ``` .wrapper { margin: 0; padding: 0; height: 100vh; z-index: 1; display: flex; } ``` and the #map ``` #map { height: 100%; width: 100vw; overflow: hidden; z-index: 0; top: 0; left: 0; position: fixed; ``` code is simple: ``` <div class="wrapper"> <div id="map"></div> <div class="entries container"> {% with 940 as width %}{% placeholder content %}{% endwith %} </p> </div> </div> ``` 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 ``` element.style { position: relative; overflow: hidden; } ``` 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. Im usign Chrome. Thanks in advance for your time! Regards JS file: ``` 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 < 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); }); ```