html - Z-index 元素在移动设备上不可点击

Question

我正在尝试在 map 上叠加文本输入字段。然而，虽然输入框在桌面上是可点击的，但在移动浏览器上却无法点击。下面是相关的 HTML 代码。请注意，div map 包裹在另一个带有 id="middle" 的 div 中。

<div id="map">
    <input id="locField" type="text" placeholder="Enter a location" style="position: relative; z-index: 10; float: right; margin: 12px;"></input>
</div>

因此输入字段 (locField) 的 z-index 为 10，map div 的 z-index 为 9，如 CSS 所示:

div#middle {-webkit-transform: translate3d(0,0,0);}
#map {position: relative; z-index: 9;}

-webkit-transform 和 position: relative 是我尝试解决此问题的残余。它们可能有帮助，也可能没有帮助，但我暂时保留了它们。如何使输入字段在移动设备上可点击？

Answer 1

像这样，尼古拉斯？

div#middle {
  -webkit-transform: translate3d(0,0,0);
  background-color: #999;
}
#map {
  position: relative; 
  z-index: 9;
  background-color: #ddd;
}
#locField {
  position: absolute; 
  top: 0;
  right: 0;
  z-index: 10;
  margin: 12px;
  padding: 10px 20px;
}

<div id="middle">
  <div id="map">
    <iframe width="100%"
height="100%"
src="https://maps.google.de/maps?hl=de&#038;q=London&#038;ie=UTF8&#038;t=&#038;z=14&#038;iwloc=A&#038;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
    
      <input id="locField" type="text" placeholder="Enter a location" style="">
    </div>
  </div>
</div>