如何修复React解剖图组件中HTML/CSS的层级堆叠问题？

问题根源 #

每个.body-part都是绝对定位元素，默认堆叠顺序由HTML出现顺序决定——后面的元素会叠加在前面的元素之上。而描述框.body-summary是.body-part的子元素，它的堆叠层级被限制在父元素的堆叠上下文内，哪怕单独给描述框设z-index也无法突破父元素的层级限制，因此会被后续的部位名称和线条盖住。

解决方案 #

核心思路是让展开描述框的.body-part整体拥有更高的堆叠层级，这样它的所有子元素（包括描述框）会自动覆盖其他.body-part元素。

1. 修改React状态（新增激活部位追踪）

在组件中添加状态记录当前激活的部位：

const [activePart, setActivePart] = useState(null);

const bodyPartHandler = (part) => {
  // 保留原有切换展开状态的逻辑
  // 新增：切换当前激活部位
  setActivePart(activePart === part ? null : part);
};

2. 给激活的部位容器添加类

修改HTML结构，为每个.body-part添加条件类：

<section className='anatomy-container'>
  <hr className='line' />
  <h1>Surgeries</h1>
  <img className='anatomy-image' src={FBA} alt='body part surgeries' />
  <div className='body-parts-container'>
    <div className={`body-part hair ${activePart === 'hair' ? 'active' : ''}`}>
      <div className='arrow'></div>
      <div className='body-part__description'>
        <h3 className='body-part__name' onClick={() => bodyPartHandler('hair')}>
          Hair
        </h3>
        <p className={`body-summary ${isOpenHair && 'show'}`}>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis unde at explicabo natus numquam reprehenderit saepe amet itaque voluptate totam eum, aliquam non praesentium vitae magni quae voluptatibus nostrum nisi.
        </p>
      </div>
      <div className='arrow'></div>
    </div>
    <div className={`body-part eyes ${activePart === 'eyes' ? 'active' : ''}`}>
      <!-- 眼睛部位内容 -->
    </div>
    <div className={`body-part nose ${activePart === 'nose' ? 'active' : ''}`}>
      <!-- 鼻子部位内容 -->
    </div>
  </div>
</section>

3. 添加CSS层级控制

更新CSS，给激活的部位容器设置更高的堆叠层级：

.body-part {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4%;
  z-index: 1; /* 默认层级，确保在图片之上 */
}

/* 激活时提升整个部位容器的层级 */
.body-part.active {
  z-index: 999;
}

/* 可选：确保描述框在父容器内层级最高 */
.body-summary {
  position: absolute;
  top: 20px;
  width: 10rem;
  background-color: rgb(57, 154, 233);
  color: aliceblue;
  border-radius: 0.5rem;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 10;
}

效果说明 #

• 默认状态下所有.body-part保持相同层级，不会互相遮挡；
• 当点击某个部位展开描述框时，该部位的容器会被提升到最高层级，其内部的描述框自然会覆盖其他部位的名称和线条；
• 关闭描述框时，激活类移除，容器回到默认层级。

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