Google Map div區域聯系表格

Question

我正在嘗試在Google地圖上放置表格。 該地圖正確顯示，但覆蓋了表單。 這是小提琴 。 它是整齊的形式，里面沒有任何東西。

.map-wrapper {
position:relative;
height:500px;
z-index:0;
  }
 .map-canvas {
 background-color:#00FFFF; /*FOR TRIAL ONLY*/
  width:100%;
 z-index:2;
 color: #29383F;
 position:absolute;
 height:100%;
left:0;
top:0;
right:0;
clear:both;

  }


#ff {z-index:50000;} /*not originally part of my code but tried anyway. failed */

 #ff input.short{display:block;width:50%;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#000; border:1px solid #AFAFAF;padding:12px;margin: 5px 0 10px 0;font-size: 16px;max-height: 45px;}


 #ff .sendButton {cursor:pointer;background-color: transparent;width:15%;color:#333;border: 3px solid #333;color: #333;font-size: 20px;padding: 8px 0 10px;}

和我的HTML只是：

 <div class="map-wrapper">
  <div class="map-canvas" id="map-canvas">Loading map...</div>
 <form id="ff" name="ff" action="#" class="contact-form" method="post" accept-charset="utf-8">
 <input type="text" name="from" id="from" class="short" placeholder="Your Name" required="required" autofocus="autofocus" value="" /><br/><br/>

 <input type="email" name="fromemail" id="fromemail" class="short" placeholder="Your Email" required="required" value="" /><br/><br/>

 <input class="sendButton send-mailbtn" type="submit" name="submit" id="submit" value="Submit"><br/><br/>

</form>

</div>

我在畫布上嘗試了不透明度，但是正如預期的那樣，它會影響地圖的可見性。

有什么線索嗎？

Answer 1

您可以嘗試設置表單樣式嗎？

form {
  z-index: 3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

https://jsfiddle.net/axdnjv1n/

Answer 2

我只需將.map-canvas div的z-index設置為-1（而不是2）就可以實現此目的。

JSFiddle

現在，您要告訴頁面將div放置在表單上方，這是您不希望發生的。

我尚未嘗試過的另一種方法，但我知道可以使用，並且避免為z-index賦予負值，是將表單放置在div中，將其位置設置為絕對位置，並使其z-index高於該值地圖div的

編輯：

我已經測試了第二個選項，這是結果：

JSFiddle