javascript - JS Google Maps打破了固定元素

我有一个带有固定导航栏的网站，该导航栏应随页面滚动。当我添加JS Google Map时，导航栏不再移动：

http://amosjackson.com/map/index.html

此外，仅在绝对定位地图时才会出现问题。

最佳答案

将translateZ添加到固定元素

-webkit-transform: translateZ(0);

我在分析整个Google地图画布时发现了。该API还将a -webkit-transform: translateZ(0)添加到地图。这使许多浏览器无法正确绘制固定元素。

此外，固定元素还可能需要其他相关的可见性属性，例如z-index和不透明度。

可行的解决方案：（我总是将地图画布放入容器中）

.my-fixed-elem {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 500 // adapt for your project
  opacity: 1 // some times you can remove this
}

.map-canvas-container {
    width: 100%; // somewidth
    height: 750px; // someheight
    position: relative;
    z-index: 18;
    top: 0;
    left: 0;
}

#map-canvas-contact {
    width: 100%;
    height: 100%;
}

最好的祝福