javascript - 如何将谷歌地图定位在前一个 div 下方?

标签 javascript html css google-maps

<分区>

我想要一个包含内容的 div,它位于 Google map 下方,该 map 略微低于之前的 div。 如果我在 map 上设置 z-index: -1 效果很好,但在那种情况下所有按钮(如放大/缩小图标)都不再起作用,并设置 z-index: div 上的 99999 不执行任何操作。 我该怎么做才能解决这个问题?

https://codepen.io/anon/pen/MOBbVB

HTML

<div class="container">
    <div class="article">
        <h1>Title</h1>
        <p>Lorem Ipsum</p
    </div>
</div>

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

CSS

.container {
  width: 768px;
  margin: auto;
  z-index: 9999999; /* This doesn't make it go over map? */
}


#map-canvas {
  height: 400px;
  position: relative;
  margin-top: -50px;
  /* z-index: -1; This works but disables buttons */
}

最佳答案

只需在您的 .container 类中添加以下几行就可以了

position:relative;
margin-bottom:10px;

关于javascript - 如何将谷歌地图定位在前一个 div 下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47491800/

上一篇:html - 为什么 body 背景颜色没有改变

下一篇:html - 组表行组 HTML

相关文章:

javascript - 如何使用 Blade 传递 PHP 变量来遍历 JavaScript 代码

javascript - d3js 使最后一个圆圈成为超链接

javascript - IE9 错误地重定向到移动网站

css - 我的 div 背景图片在 IE8 中不显示

css - 将桌面图像渲染为移动 React JSX 的背景

javascript - AJAX PHP+MySQL - 选择框

javascript - 从 React Ref 对象访问 Props

javascript - 数据表中特定列的下拉过滤器

javascript - HTML 表格和 JavaScript

html - li之间的导航栏间距