我试图在react中创建一个组件，其中有一个身体解剖结构的图像，在该图像上有指向相关身体部位的名称和线条，当您单击名称时，会出现一个框，其中包含有关该身体部位的描述。一切正常，但当框打开时，元素的堆栈级别不正确，似乎堆栈流是图像，描述容器，顶部是主体部分名称和行。结果，名称和其他身体部分的行可以在描述容器的顶部看到。似乎是一个索引问题。我试图给索引值，但似乎没有工作。我希望打开的新框覆盖下面部分的名称。有在完成的代码中有更多的主体部分。你们有关于我如何解决这个问题的想法吗？我没有包括JS代码，因为它与问题无关，因为问题在于HTML和CSS。提前感谢。

<section className='anatomy-container'>
      <hr className='line' />
      <h1 className=''>Surgeries</h1>
      <img className='anatomy-image' src={FBA} alt='body part surgeries' />
      <div className='body-parts-container'>
        <div className='body-part hair'>
          <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'>
          <div className='arrow'></div>
          <div className='body-part__description'>
            <h3
              className='body-part__name'
              onClick={() => bodyPartHandler('eyes')}
            >
              Eyes
            </h3>
            <p className={`body-summary ${isOpenEyes && '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>
        <div className='body-part nose'>
          <div className='arrow'></div>
          <div className='body-part__description'>
            <h3
              className='body-part__name'
              onClick={() => bodyPartHandler('nose')}
            >
              Nose
            </h3>
            <p className={`body-summary ${isOpenNose && '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>
      </div>
    </section>


CSS:
.anatomy-container {
  margin: auto;
  text-align: center;
  position: relative;
  max-width: 800px;
}

.line {
  margin-top: 3rem;
  background-color: rgba(76, 101, 245, 0.781);
  height: 0.2rem;
}

.anatomy-image {
  width: 100%;
  height: auto;
}

.body-part {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4%;
}

.arrow {
  background-color: rgba(76, 101, 245, 0.781);
  width: 100%;
  height: 0.2px;
  margin: auto;
}

.body-part__description {
  position: relative;
}

.body-part__name {
  position: relative;
  margin: 0;
  cursor: pointer;
  padding: 0.5rem;
  transition: transform 0.2s ease-in-out;
}

.body-part__name:hover {
  color: rgba(76, 101, 245, 0.781);
  transform: scale(1.2);
}

.body-summary {
  position: absolute;
  top: 20px;
  /* left: -60px; */
  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;
}

.show {
  opacity: 1;
}

/* Body Parts */

.hair {
  width: 53%;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eyes {
  width: 30%;
  top: 20%;
  left: 39%;
  transform: translate(-50%, -50%);
}

.nose {
  width: 32%;
  top: 22%;
  left: 38%;
  transform: translate(-50%, -50%);
}

字符串