html - 使用 z-index:-1 时谷歌地图不活动

Question

我想在执行 z-index 时解决 Google Map 中的问题：-1 不激活地图，但 div 如我所愿在地图上方...我想激活地图，且 div 仍然在地图上方

<div id="map" style="z-index: -1;"></div>

<div id="filter-div-for-sale-mobile" style="transform-origin: left 78.5px;top: 39px;left: -273.61px;width:360.5px;" class="zsg-popover_arrow-up zsg-popover-adjustable popover-thick-top popover-no-close popover-visible filter-button-popover listing-type-popover">

标签： htmlcss

Answer 1

I would recommend using the iframe option provided by Google as it is much more controllable in regards to the CSS styling perspective of making it responsive on a page.

Sample of what I mean. (the width and height for the iframe attribute aren't required)

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?zoom=10&center=51.5074%2C-0.1278&key=..." allowfullscreen></iframe>