求助：如何将联系表单覆盖在Google Map上？z-index设置无效

嘿，我来帮你搞定这个z-index不生效的麻烦！其实z-index失效大多是因为没满足它的生效前提，咱们一步步排查：

核心前提：z-index只对定位元素生效 #

z-index可不是随便加就能用的，你的联系表单容器必须先设置 position 属性为 relative、absolute、fixed 或者 sticky，不然z-index完全不起作用。这是最容易踩的坑！

针对你的代码场景，具体修改建议 #

结合你给出的代码片段，我给你整理了几个关键调整点：

1. 给表单容器加定位和z-index
   假设你的联系表单是放在#page4里面的，给表单的外层容器加样式：

   .contact-form-wrapper {
     position: absolute; /* 或者relative，根据布局需求选择 */
     z-index: 100; /* 数值要比地图容器的z-index大，默认地图z-index为0，这里设100足够 */
     /* 再加定位偏移，让表单显示在地图合适位置 */
     top: 30px;
     left: 30px;
     background: #fff; /* 加背景色避免表单和地图内容重叠看不清 */
     padding: 20px;
   }
   

2. 确保父容器#page4设置相对定位
   如果你的表单用了absolute定位，一定要让它的父容器#page4设置position: relative;，这样表单的定位才会相对于#page4，而不是整个页面乱跑：

   #page4 {
     position: relative;
   }
   

3. 检查地图容器的z-index
   看看Google Map的iframe或者它的父容器有没有设置过高的z-index，如果有的话，把表单的z-index调得比它更高就行。默认情况下iframe的z-index是0，所以只要表单的z-index大于0且是定位元素，就能覆盖。

额外排查点 #

• 有没有父元素设置了overflow: hidden？如果表单的父容器或者祖先容器加了这个属性，可能会把超出的表单部分截断，导致看起来没覆盖。
• 有没有用了transform、filter这类属性？这些属性会创建新的堆叠上下文，可能导致z-index失效，要是有这类样式，暂时去掉试试。

举个完整的修改后代码例子：

<div id="page4" style="position: relative;">
  <a id="contact" class="smooth"></a>
  <div style="width: 100%">
    <iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=lithonia%2C%20Georgia+()&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no"></iframe>
  </div>
  <!-- 联系表单 -->
  <div class="contact-form-wrapper" style="position: absolute; top: 30px; left: 30px; z-index: 100; background: white; padding: 20px;">
    <form>
      <input type="text" placeholder="姓名">
      <input type="email" placeholder="邮箱">
      <button type="submit">提交</button>
    </form>
  </div>
</div>

按照这个思路调整，应该就能让表单成功覆盖在地图上啦！

内容的提问来源于stack exchange，提问作者Clarissa