Z-index 项目在移动设备上不可点击

Question

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

<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，mapdiv的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>

Z-index 项目在移动设备上不可点击

Z-index item not clickable on mobile

html

css

maps

z-index

mobile-safari