Css 为什么谷歌地图会覆盖我的div标签

我创建了一个名为“MapCanvas”的div标签，谷歌地图就在这里。在我的样式表中，我已将位置设置为“固定”，但当我打开浏览器并检查时，我看到google maps已使用自己的样式覆盖了我的样式，并将“位置固定”更改为“位置：相对”。为什么？我怎样才能阻止谷歌这么做？我试着将样式属性放在标签中，但谷歌仍然覆盖了这些值

以前

#map-canvas {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 900px;
background-color: pink;
/* border: 3px solid black; */
}

之后

---

当你调用

新的google.maps.Map（element）

时，谷歌会做任何它想做的事情，来创建

元素。而是将google maps附加到样式化元素中的元素：

css:

html:



element.style {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0px);
background-color: rgb(229, 227, 223);
}

#map-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 40%;
height: 900px;
background-color: pink;
/* border: 3px solid black; */
}

<div id="map-container">
  <div id="map-canvas">
  </div>
</div>