Question

我正在尝试在地图上叠加文字输入字段。但是，虽然可以在桌面上单击输入框，但在移动浏览器上无法进行点击。以下是相关的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

像这样，尼古拉斯？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Z-index项目无法在移动设备上点击

1 个答案: