Google Custom Search Element遮挡下拉菜单，如何让菜单前置显示？

问题出在Google自定义搜索组件默认会生成iframe来渲染内容，iframe属于独立的浏览上下文，普通的z-index设置对它的兄弟元素（你的下拉菜单）无效——这就是你调z-index没效果的原因。

给你两个可行的解决方案：

方案一：禁用iframe渲染（推荐） #

给搜索组件的容器添加data-no-iframe="true"属性，让它用普通DOM元素而非iframe渲染，这样就能通过z-index正常控制层级了。修改后的代码如下：

<div class="gcse-searchbox-only" 
     data-resultsUrl="https://example.com/search-results/" 
     data-newWindow="false" 
     data-queryParameterName="q"
     data-no-iframe="true"
     id="search"></div>

然后给下拉菜单的容器设置定位和足够高的z-index：

/* 替换成你实际的下拉菜单容器类名 */
.your-dropdown-wrapper {
  position: relative; /* 必须设置定位，z-index才会生效 */
  z-index: 9999; /* 数值比搜索组件的z-index高即可 */
}

/* 可选：给搜索组件设置更低的层级确保优先级 */
#search {
  position: relative;
  z-index: 1;
}

方案二：强制覆盖iframe层级（仅当必须保留iframe时使用） #

如果因为某些原因不能禁用iframe，可以尝试给下拉菜单设置position: fixed（或absolute），同时设置极高的z-index，并且确保搜索组件的iframe没有设置更高的z-index。不过这种方法兼容性不如方案一，因为部分浏览器中iframe的层级优先级更高。

.your-dropdown-wrapper {
  position: fixed;
  z-index: 99999;
}

另外检查下拉菜单的父容器是否有overflow: hidden属性，如果有会裁剪下拉内容，需要移除这个属性或者调整父容器的尺寸。

内容的提问来源于stack exchange，提问作者T. Veil