谷歌地图 iframe 的 z-index 阻止放大缩小答案

【问题标题】：z-index blocking out zoom-in zoom-out for Google map iframe谷歌地图 iframe 的 z-index 阻止放大缩小
【发布时间】：2017-11-21 17:15:24
【问题描述】：

我有一个对角线图像，我将用于整个身体背景。我在插入谷歌地图 iframe 的图像中有很大的空间。但是它不可点击或放大或缩小。

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    position: fixed;
    top: 0;
    z-index: -9999999999;
}
img {
    position: fixed;
    top: 0;
}

https://jsfiddle.net/3ef2onLc/1/

【问题讨论】：

你可以放大和缩小，但只能在图像之外。甚至图像的透明部分仍然充当顶部的图层。我建议重新考虑您的设计以使用两个图像并理想地完全消除角度。

标签： html css google-maps iframe z-index

【解决方案1】：

您的图片是透明的，但实际上覆盖了整个地图，因此您将始终点击该图片。

一种快速的解决方案是将图像分成两部分，左侧部分和上部。这样你就可以在右下角获得一个可点击的季度。

更好的解决方案是用一些 css 用 div 构建有角度的部分。（有帮助：http://apps.eky.hk/css-triangle-generator/）

【讨论】：