dropdown menu被div遮挡 设置z-index无效 如何修复CSS

问题原因 #

下拉菜单被遮挡的核心原因是父元素.Post-body设置了overflow: hidden属性，该属性会强制裁剪所有超出容器边界的内容，此时即使给下拉菜单设置再高的z-index也无法生效，因为元素在父容器范围外的部分已经被直接截断了。

解决方案 #

方案一（最简方案，适配大部分场景） #

直接移除或修改.Post-body的overflow属性：

.Post-body {
  /* 将原来的overflow:hidden替换为overflow:visible */
  overflow: visible;
}

同时可以适当调高下拉菜单的z-index值，避免被页面其他同级元素遮挡：

.dropdown-content-prev {
  display: none;
  border-radius: 20px;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 250px;
  padding: 7px;
  z-index: 999; /* 只要高于页面其他元素的z-index即可 */
}

方案二（必须保留.Post-body的overflow:hidden时使用） #

将下拉菜单的DOM结构移动到.Post-body节点之外，再通过JS计算放大镜图标的坐标来动态设置下拉菜单的绝对定位位置，同时保留高z-index配置即可。

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