为什么Google地图会覆盖我的div标签

Question

我创建了一个名为“map-canvas”的div标签，谷歌地图就在这里。在我的样式表中，我已将位置设置为固定，但是当我打开浏览器并检查时，我看到谷歌地图已经覆盖了我的样式，其自身和更改的位置固定为位置：相对。为什么？如何覆盖谷歌这样做？我尝试在标记中放置样式属性，但谷歌仍然覆盖了这些值。

前

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

后

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

Answer 1

当您致电new google.maps.Map(element)时，Google会尽其所能element。而是将谷歌地图附加到样式元素中的元素：

的CSS：

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

HTML：

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