问题分析： 原始CSS代码中，.content span.ImgHover img样式规则定义了图片的绝对定位、位置、透明度等，但缺少z-index属性。当图片弹出时，它在父级.ImgHover（具有position: relative）所创建的层叠上下文中，其默认z-index可能不足以使其覆盖相邻的.person块。

解决方案： 为悬停时弹出的图片添加一个足够高的z-index值，以确保它在显示时能够覆盖所有相邻或可能遮挡它的元素。

修改后的CSS代码：

/* Image on hovering for tree leaf */

.content span.ImgHover {
    display: block;
    position: relative; /* 确保ImgHover创建层叠上下文，或作为定位基准 */
}

.content span.ImgHover img {
    position: absolute;
    display: inherit;
    right: -130px; /* 图片向右弹出 */
    top: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
    /* 关键修改：添加 z-index 属性 */
    z-index: 99; /* 赋予一个较高的z-index值，确保其在最上层 */
}

.content span.ImgHover:hover img {
    display: inherit;
    top: 0px;
    opacity: 1;
}

通过将.content span.ImgHover img的z-index设置为99（或其他足够大的正整数），我们强制浏览器将其渲染在当前层叠上下文中的其他元素之上。由于.ImgHover本身是position: relative，它为内部的绝对定位图片提供了一个定位上下文，并且通过z-index: 99，图片能够有效地“浮”到其兄弟元素上方。

完整示例代码

为了更清晰地展示，以下是包含关键修改的HTML和CSS片段。

HTML结构（关键部分）：

 
  

    
 
      
         
           
            
              
              @@##@@
              


            
          
          
        
      
      

        
 
            
             
               
                
                  
                  @@##@@
                  


                
              
            
          
        
        
 
          
             
               
                
                  
                  @@##@@
                  


                
              
            
            
        
        
      
    
  
 

完整CSS代码（包含z-index修改）：

/* Tree */

.tree ul {
  padding-top: 20px;
  position: relative;
  padding-inline-start: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree ul li ul {
    display: flex;
    justify-content: center;    
    position: relative;
    padding: 20px 0 0 0;
} 

.tree li {
  display: table-cell;
  text-align: center;
  vertical-align: top;
  list-style-type: none;
  position: relative;
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 5px solid #ccc;
  width: 50%;
  height: 19px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 5px solid #ccc;
}

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}

.tree li:only-child {
  padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 5px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 5px solid #ccc;
  width: 0;
  height: 21px;
}

.tree li .family {
  position: relative;
}

/* Person */

.person {
  border: 3px solid black;
  padding: 1.5px;
  min-width: 250px;
  display: inline-block;
}

.person.female {
  border-color: #F45B69;
  top: 0px
}

.person.male {
  top: 0px;
  border-color: #456990;
}

.person .content {
  position: relative;
  font-size: 16px;
  text-align: center;
}

/*-----------------------------*/

/* Image on hovering for links (Unchanged, for context) */

span.product a img {
    display: none;
    position: absolute;
    left: -20px;
    top: -20px;
}

span.product a {
    display: inline-block;
    position: relative;
}

span.product a img {
    display: none;
}

span.product a:hover img {
    display: inherit;
}

/*-----------------------------*/

/* Image on hovering for tree leaf (Modified) */

.content span.ImgHover {
    display: block;
    position: relative; /* 确保ImgHover创建层叠上下文，或作为定位基准 */
}

.content span.ImgHover img {
    position: absolute;
    display: inherit;
    right: -130px;
    top: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
    /* 关键修改：添加 z-index 属性 */
    z-index: 99; /* 赋予一个较高的z-index值，确保其在最上层 */
}

.content span.ImgHover:hover img {
    display: inherit;
    top: 0px;
    opacity: 1;
}

注意事项与最佳实践

1. position属性的必要性：再次强调，z-index仅对position属性为relative、absolute、fixed或sticky的元素有效。如果目标元素仍是static定位，z-index将不起作用。
2. z-index值的选择：选择一个足够大的z-index值（如99、999），以确保它能覆盖页面上大多数其他元素。但在实际项目中，应谨慎规划z-index体系，避免随意使用过大的值导致层叠顺序混乱，增加后期维护难度。通常，在一个局部组件内，从较小的值开始递增即可。
3. 层叠上下文的影响：虽然为图片设置了高z-index，但如果图片的某个祖先元素创建了一个层叠上下文，并且该祖先元素的z-index低于可能遮挡它的外部元素，那么图片仍然可能被遮挡。在这种情况下，需要调整祖先元素的z-index。在本案例中，.ImgHover的position: relative通常足以建立一个有效的层叠上下文，使得其内部的绝对定位图片能够通过z-index提升自身。
4. 性能与可访问性：过度使用z-index或创建过多层叠上下文可能会对页面渲染性能产生轻微影响。同时，对于弹出内容，应考虑其对键盘导航和屏幕阅读器的可访问性，确保所有用户都能良好地交互。

总结

通过为悬停时弹出的图片添加z-index属性，我们能够精确控制其在Z轴上的堆叠顺序，从而有效解决在复杂布局中图片被相邻元素遮挡的问题。理解z-index与position属性以及层叠上下文之间的关系，是掌握CSS布局中元素深度控制的关键。正确运用这些知识，可以显著提升用户界面的视觉效果和交互体验。