Z-index item not clickable on mobile

Question

I'm trying to overlay a text input field on a map. However, while the input box is clickable on desktop, it has not proved clickable on mobile browsers. Below is the relevant HTML code. Note that div map is wrapped in another div with 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>

So the input field (locField) has z-index 10, and the map div has z-index 9, as shown in the CSS:

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

The -webkit-transform and position: relatives are vestigials of my attempts to fix this issue. They may or may not be helpful but I've left them in for now. How can I make the input field clickable on mobile?

Answer 1

like this, Nicholas?

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>