家族树中Hover弹出图片被右侧Block遮挡的解决问询

核心原因 #

家族树的节点通常按横向顺序渲染，右侧节点在DOM结构中位置更靠后，默认情况下后渲染的元素z-index层级更高，因此左侧节点的hover弹窗会被右侧节点覆盖。

具体解决方法 #

1. 给Hover弹窗设置高优先级z-index #

直接为弹窗元素添加CSS样式，确保其层级高于所有家族树节点：

.hover-popup {
  position: absolute; /* 弹窗必须是定位元素，z-index才生效 */
  z-index: 9999; /* 用足够大的数值，确保覆盖所有节点 */
  /* 保留你的其他弹窗样式，比如背景、内边距等 */
}

注意：弹窗必须设置position: absolute/relative/fixed中的一种，否则z-index属性不会生效。

2. 动态设置节点层级（可选） #

如果不想用全局高z-index，可以给不同位置的节点设置差异化层级，让左侧节点的弹窗优先级更高：

.family-tree-node.left {
  position: relative;
  z-index: 10;
}
.family-tree-node.right {
  position: relative;
  z-index: 5;
}
.family-tree-node .hover-popup {
  position: absolute;
  z-index: inherit; /* 继承父节点的层级 */
}

3. 检查父元素的溢出与层级设置 #

若弹窗的父节点（家族树节点）设置了overflow: hidden，会直接裁剪弹窗；父节点层级过低也会影响弹窗显示，需确保：

.family-tree-node {
  overflow: visible; /* 禁止使用hidden，避免弹窗被裁剪 */
  position: relative; /* 让弹窗的绝对定位基于当前节点 */
}

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